Lottie Animation Previewer - Online JSON Player
Paste Lottie JSON code or upload a .json file and see the animation play. Control speed and loop. Perfect for developers.
UD5 Toolkit
Type[]. Mixed-type arrays use union types like (string | number)[]. Arrays of objects receive special treatment: the tool merges properties from all array elements, automatically marks inconsistently present properties as optional, and generates a dedicated interface for the array item type. Empty arrays default to any[].
?) based on the JSON data. If a property appears in only some array elements or has a null value, it's marked optional. When disabled, all properties are required, and null values are represented as union types with | null. This gives you control over strictness in your type definitions.
.ts or .d.ts file. The tool produces clean, properly indented code with correct TypeScript syntax. You can toggle the export keyword to make interfaces importable across modules, and choose between semicolons or line breaks as property delimiters.
string, numbers to number, booleans to boolean, objects to generated interfaces, arrays to Type[] or union arrays, and null to null (or any when the type cannot be determined). The tool performs deep analysis of your data structure to produce the most accurate TypeScript types possible.
interface declarations by default, which is the preferred approach in TypeScript for object shapes due to better error messages and extendability. If the top-level JSON is an array, a type alias is generated instead (e.g., type Root = ItemType[]), since interfaces cannot directly describe array types.
Paste Lottie JSON code or upload a .json file and see the animation play. Control speed and loop. Perfect for developers.
Enter a message and render it as an image of dots and dashes. Customizable colors. Great for posters.
Visual reference for common seam allowances (1/4″, 5/8″, etc.) with actual size on screen. Essential sewing aid.
Paste a Base64 data URI and download the image directly. Supports JPEG, PNG, GIF, WebP. Safe local processing.
A clean, printable Morse code chart with letters, numbers, and common punctuation. Learn and decode easily. Static.
Turn multiple images into a single Base64‑encoded sprite sheet and get the corresponding CSS background‑positions. Local.
Write or paste an HTML snippet and generate a PDF using the browser's print engine. Customize page size and margins.
Search a city or country and see its current UTC offset, DST status, and abbreviation. Quick reference for scheduling.
Wrap any image in a classic Polaroid frame with optional text caption. Export as PNG. Nostalgic touch for social media.
Encode short audio clips into Base64 data URIs for direct embedding in HTML5 <audio> tags. No external files needed.
See famous people's life spans on a draggable timeline. Compare who was alive at the same time. Educational fun.
Convert multiple images to Base64 data URIs at once. Copy individually or as a JSON array. Great for inline assets. Local.
Convert short text into a black‑and‑white Braille bump image ready for embossing. Educational and inclusive.
Transform your photo into a comic book panel with Ben‑Day dots, heavy outlines, and speech bubbles. Download as image.
Select a US state and legal category (debt, personal injury) to see typical time limits. Quick informational guide.
Draw your signature on a canvas and overlay it onto a PDF document. All editing stays in your browser.
See the chromaticity diagram and compare sRGB, DCI‑P3, and your display. Fun for design geeks.
Upload two face portraits and watch a simple morphing transition. Not professional, but fun experiment with canvas.
Search and filter all CSS properties that can be animated. See value types and example keyframes. Quick dev reference.
Given a background color, this tool suggests foreground colors that meet AA/AAA contrast ratios. Works for all vision types.
Look up storage times for pantry, fridge, and freezer items. Reduce food waste. Local database.
Paste an image from your clipboard directly into the page (Ctrl+V) and extract its color palette. No file dialog needed.
Click an image and see a smooth cross‑fade and morph to a large preview using View Transitions API. Copy the implementation code.
Create CSS clamp() values for fluid typography. Enter min and max font sizes and viewport widths. Modern responsive design.
Generate a realistic‑sounding dinosaur name and see a fun description. Perfect for kids and writers.
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Fill in your PWA details to generate a valid manifest.json file. Include icons, theme color, display mode.
Create a QR code that lets people connect to your Wi‑Fi without typing a password. Just scan and join. Secure local.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Upload a small pixel art image and get a CSS grid layout that recreates it using divs. Novelty developer tool.