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.

Lottie Editor - Online Animation Editor (Skia Powered)

How to Edit a Lottie Animation

Upload your Lottie file

Drag and drop a Lottie JSON file onto the editor, or click Browse Files to select one. You can also try the built-in sample animations to explore the editor.

Preview and control playback

The animation plays immediately with GPU-accelerated Skia rendering. Use the playback controls to play, pause, scrub the timeline, or adjust the speed.

Edit colors, text, and opacity

Expand the layer tree to select individual layers. Modify fill colors, stroke colors, text content, and opacity values. Changes update the preview in real time.

Toggle layer visibility

Show or hide individual layers to isolate parts of the animation. This helps when working with complex animations that have many overlapping elements.

Export your changes

Click Export JSON to download the modified Lottie animation, or Export PNG to capture a single frame. The exported file preserves all your edits.

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.

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.