Lottie Editor & Inspector
Preview any Lottie file, edit colors live, toggle layers, and export as GIF, WebM, PNG or SVG. Free, no signup, works in your browser.
Drop a Lottie file here
Supports .json and .lottie
Or try a sample
Sponsored
Need a Lottie for your project?
Browse thousands of premium animations on Envato Market.
About Lottie files
Lottie is a JSON-based animation format created by Airbnb. Exported from Adobe After Effects via the Bodymovin plugin, Lottie files are vector-based, scalable, and render natively on web, iOS, and Android — much lighter than GIFs or video.
This free Lottie editor lets you preview animations, edit colors live, toggle layers, inspect performance, and export to GIF, WebM, PNG, or SVG — all in your browser. Common use cases include loading spinners, onboarding flows, animated icons, celebration effects, and empty state illustrations.
Lottie JSON files work with all major Lottie player libraries. On the web, lottie-web (Bodymovin) is the standard renderer; React developers use lottie-react or @lottiefiles/react-lottie-player. For mobile, lottie-ios and lottie-android render natively, with official packages also available for Flutter and React Native.
Frequently asked questions
Can I edit the colors of a Lottie animation online?
Yes. Upload your Lottie file and open the Colors tab — every unique color in the animation is listed as a swatch with its hex code. Click any swatch to open a color picker; the animation updates live as you drag. Download the recolored JSON or export as GIF when done, all free.
How do I hide or isolate a layer in a Lottie file?
Open the Layers tab in the inspector panel, hover over any layer, and click the eye icon to hide it or the star icon to solo it (hide everything else). Great for debugging which layer is causing a rendering issue or for exporting just part of an animation.
How do I preview a Lottie JSON file?
Drag and drop your .json or .lottie file onto the upload area, click "Browse files", or paste a URL. The animation plays instantly — no signup or install required. Use the scrubber to jump to any frame and the keyboard shortcuts (Space to play/pause, arrow keys to step frames) for precise inspection.
How do I optimize or compress a Lottie file?
Click the "Optimize" button after loading your file. The tool rounds decimal precision, strips metadata, and removes hidden layers. You'll see a before/after file size comparison with the percentage saved — typically 20-60% smaller — and can download the optimized version.
Can I export a Lottie as a GIF, WebM, or PNG?
Yes. Export the full animation as GIF or WebM, or export the current frame as a high-resolution PNG or scalable SVG. All conversion happens in your browser — nothing is uploaded to a server. Edited colors and hidden layers are reflected in the export.
What is a Lottie file?
Lottie is a JSON-based animation format created by Airbnb. Exported from Adobe After Effects via the Bodymovin plugin, Lottie files are vector-based, scalable, and render natively on web, iOS, and Android — much smaller than GIFs or video.
Can I edit .lottie (dotLottie) files too?
Yes. This editor supports both standard .json Lottie files and compressed .lottie (dotLottie) archives. The format is auto-detected when you upload.
Can I load a Lottie from a URL?
Yes. Click "From URL" and paste the direct link to any .json or .lottie file. We fetch it server-side, so it works even if the remote server blocks direct browser requests (CORS).
How do I check a Lottie for performance issues?
The Warnings tab in the inspector flags files with too many layers (mobile performance risk), large file sizes, oversized canvases, or expressions that may not work across all Lottie players (lottie-web, lottie-ios, lottie-android).
Is this Lottie editor free?
Yes. Preview, color editing, layer inspection, optimization, and all exports (GIF, WebM, PNG, SVG, JSON) are free with no signup, no watermark, and no file size limits on uploads.
Is my Lottie file uploaded to a server?
No. Files you drop or select are processed entirely in your browser — nothing is uploaded. Only the URL loader uses a server-side proxy (to bypass CORS), and those requests are not logged or stored.