Home

Lottie Editor

Preview and recolor Lottie JSON in your browser

Upload a `.json` Lottie animation, inspect the colors used in fills and strokes, replace them with color pickers, preview the result live, and download the modified JSON without uploading anything to a server.

100% local processing
Editable color detection
Download modified JSON
Upload Lottie JSON
Edit fill and stroke colors, then download the modified animation JSON.
Drop a .json Lottie file here or click to browse.
File Name
-
Dimensions
-
Layers
-
Colors Found
-
Live Preview

Load a Lottie JSON file to preview the animation and unlock color editing.

Editable Colors
Detected from Lottie fill and stroke color arrays. Changing a swatch updates every matching occurrence in the JSON.
0
No file loaded yet.

Why use this Lottie editor?

Local by default

Your animation JSON is parsed, rendered, edited, and downloaded entirely in the browser.

Safe color detection

The editor scans Lottie color properties and updates only the discovered color arrays instead of rewriting unrelated structure.

Live preview

Every color change re-renders the animation immediately so you can inspect the result before downloading.

Clean JSON export

Download an updated `.json` file with the original structure preserved except for the color values you changed.

Privacy

All processing happens locally in your browser. Your data is never uploaded to any server.

Frequently Asked Questions

What kinds of Lottie colors can this tool edit?
It detects standard fill and stroke color arrays in Lottie JSON, including static colors and animated keyframe color values commonly stored in `c.k`, `s`, and `e` arrays.
Will it work for every Lottie file?
It works for most standard Bodymovin/Lottie JSON files. Some animations use expressions, images, or plugin-specific structures that are previewable but may not expose editable colors.
Does changing one listed color update multiple layers?
Yes. The editor groups matching discovered colors together, so replacing a listed swatch updates every matching occurrence in the parsed animation JSON.
Is my animation uploaded anywhere?
No. The file stays on your device. Rendering uses a browser-side Lottie player, and downloads are generated locally in your browser.

About Lottie Editor

Use this Lottie editor to preview and recolor Lottie JSON animations online for free. Lottie files are lightweight JSON animations exported from Adobe After Effects through Bodymovin and widely used in apps, landing pages, onboarding flows, and product interfaces. When you need a quick brand refresh, a dark-mode variant, or a client-specific colorway, editing the color arrays directly in the JSON is often the fastest route.

This tool inspects the uploaded animation locally in your browser, finds editable fill and stroke colors, lets you update them visually, then downloads a modified JSON file. Because the editing logic only touches discovered color arrays, the original animation structure stays intact as much as possible.

Common Questions

How does the color replacement work?

The editor traverses the parsed Lottie JSON and looks for standard color properties used by fills and strokes. Static color arrays and animated keyframe color arrays are normalized into swatches, then updated in place when you pick a replacement color.

Can I use this to test branding changes before shipping?

Yes. The live preview makes it useful for quick visual QA before you commit a recolored animation into a codebase, design system, or marketing site.

What if the file is valid JSON but not a Lottie animation?

The tool validates the uploaded structure and shows a clear message when the file does not look like a standard Lottie JSON animation.

Which related tools should I use next?

For adjacent frontend work, try the Color Picker, JSON Formatter, and Image to Base64 tools.

Feedback
Buy Me a Coffee at ko-fi.com