Free & Open Source

Create
Beautiful Animations
Effortlessly

The free Lottie editor for designers and developers. Edit, create from scratch, or generate with AI.

or drag & drop .json file

Why Use Lottie Editor?

Lottie animations are the standard for lightweight, scalable animations on the web and mobile apps. Created in After Effects and exported via Bodymovin, Lottie files are JSON-based animations used by companies like Airbnb, Uber, and Spotify. Our Lottie Editor lets you preview and modify these animations directly in your browser using Google's Skia rendering engine (the same engine behind Chrome and Android). Edit colors, text content, and opacity without round-tripping to design software. The GPU-accelerated CanvasKit renderer ensures pixel-perfect playback that matches native app rendering. No signup, no installation, no file uploads to servers. Everything runs locally in your browser.

The Lottie Editor is a browser-based animation editor that lets you preview and modify Lottie JSON files using Google's Skia rendering engine, the same graphics library that powers Chrome, Android, and Flutter. Lottie is a widely adopted animation format created by Airbnb, where designers build animations in Adobe After Effects and export them via the Bodymovin plugin as lightweight, scalable JSON files used across web, iOS, and Android applications. This editor uses the CanvasKit WebAssembly module, which includes Skottie, Google's native Lottie renderer, delivering GPU-accelerated playback that matches the rendering quality of native mobile applications. You can edit fill colors, stroke colors, text content, and layer opacity directly in the browser without returning to After Effects or other design software. The layer tree panel lets you expand and inspect individual animation layers, toggle their visibility, and select them for property editing. Playback controls include play, pause, timeline scrubbing, and speed adjustment from 0.25x to 4x. Export options include downloading the modified Lottie JSON with all your edits preserved, or capturing a single frame as a PNG image. Full undo and redo support is available via keyboard shortcuts. All processing happens entirely in your browser using WebAssembly, with no files uploaded to any server.

Frequently Asked Questions

What is a Lottie animation?

A Lottie animation is a JSON-based animation format created by Airbnb. Designers create animations in Adobe After Effects and export them using the Bodymovin plugin. The resulting JSON file can be rendered on web, iOS, and Android with small file sizes and perfect scalability.

Why does this editor use Skia/CanvasKit?

Skia is Google's 2D graphics library used in Chrome, Android, and Flutter. The CanvasKit WASM module includes Skottie, Google's native Lottie renderer. This gives you the same rendering quality as native mobile apps, with support for complex masks, mattes, and effects that JavaScript-based renderers may miss.

Is my animation data sent to any server?

No. Everything runs entirely in your browser using WebAssembly. Your animation files never leave your device. The only network request is loading the Skia rendering engine itself.

What Lottie features can I edit?

You can edit fill colors, stroke colors, text content, and layer opacity. You can also toggle layer visibility. Keyframe editing and complex transform modifications are planned for a future version.

What file formats are supported?

Currently, standard Lottie JSON files (.json) are supported. Support for .lottie files (which are ZIP archives containing JSON and assets) is planned for a future update.

Rate This Tool

Get Weekly Tools

Join 10,000+ users getting our tool updates.

CreateBeautiful AnimationsEffortlessly

Create
Beautiful Animations
Effortlessly