Lottie Player, Colour Editor and Optimizer — All Local
Open .lottie, .tgs and .json animations, recolour every fill, stroke and gradient stop, check what will break on other players, and export to JSON, SVG, PNG, a frame sequence or WebM — all inside your browser.
Open an animation to see its structure.
How it works
Drop the file
A raw .json, a .lottie archive, a Telegram .tgs sticker or a gzipped .json.gz. Nothing is uploaded anywhere.
Read the report
Before anything renders you get the size, the layer count and a list of what will break on iOS, Android or older players.
Recolour and trim
Every fill, stroke, gradient stop and animated colour keyframe becomes a swatch. Hide layers, trim the range, override the framerate.
Export or keep going
JSON, .lottie, SVG, PNG, a numbered frame sequence or a WebM video — or send the result straight to another tool in the suite.
Nothing leaves your machine
The player, the colour editor, the optimizer and every export run on your own CPU. No upload, no account, no queue — and it keeps working with the network unplugged.
Colours the other viewers miss
Most online viewers only find static fills. This one also picks up strokes, gradient stops, solid layers and animated colour keyframes, and tells you how many times each colour is used.
A real layer tree
Every top-level layer with its type, its expressions and its track mattes, and a switch to hide the ones you do not want. Hidden layers can then be dropped from the exported file.
An optimizer that shows its work
Rounding the coordinates the exporter wrote with fifteen digits, dropping author metadata and removing hidden layers routinely halves the file. You see the byte count before and after, not a promise.
Raster and video export
The current frame as PNG or SVG, the whole range as a numbered PNG sequence in a ZIP, or a frame-exact WebM video. All rendered on a canvas in this tab.
A compatibility report
Expressions, merge paths, layer effects, text layers, 3D flags and image assets referenced by URL — the things that make an animation look right here and wrong on a phone.
A player that renders, not a preview that streams
The animation is rendered by lottie-web running on this page, at the document's own framerate, with frame-exact scrubbing and a real transport: step a frame at a time, play backwards, trim the range, override the fps. Because the renderer is local there is no upload wait and no quality ceiling imposed by a preview service.
Open a Lottie animation, see exactly what is inside it, recolour it, strip the weight out of it and export it in the format you actually need — without uploading it to anyone.
Designers hand over a Lottie that weighs 900 KB and breaks on Android. This tool tells you why before you ship it, lets you recolour it to match the brand without going back to After Effects, drops the hidden layers the exporter left behind, and hands you the file in JSON, .lottie, SVG, PNG, frame sequence or WebM form.
Every operation happens in this tab. The tool also flags animations that reference image assets by URL, because those are the one case where a Lottie is not self-contained — and it inlines them for you when they arrive inside a .lottie archive.
Frequently Asked Questions
QAre my animations uploaded anywhere?+
No. The file is read with the browser's own File API, parsed in memory and rendered by a player bundled with this page. There is no server call at any point, and nothing is stored between visits.
QWhich file formats can I open?+
A raw .json Lottie, a .lottie archive (the format lottiefiles.com hands you by default), a Telegram .tgs sticker and a gzipped .json.gz. Containers are detected by their contents, so a misnamed file still opens.
QWhy does nothing play as soon as I drop a file?+
On purpose. Dropping a file only parses and inspects it; you get its size, its structure and its compatibility report first, and the player starts when you press the button. If you would rather skip that entirely, paste the JSON by hand and it opens immediately.
QWhich colours can actually be edited?+
Static fills and strokes, every stop of a gradient fill or gradient stroke, the colour of a solid layer, and each keyframe of an animated colour property. Colours baked into an embedded PNG or produced by a layer effect cannot be changed — no editor can do that without redrawing the asset.
QHow much smaller does the optimizer make a file?+
It depends entirely on the source, which is why the tool shows the real byte count before and after instead of quoting a number. Files straight out of After Effects are usually 40-60% smaller at two decimal places, because most of their weight is coordinates written with fifteen significant digits.
QCan I export a GIF?+
Not directly, and that is deliberate: an in-browser GIF encoder would posterise the colours of a vector animation. Export a numbered PNG sequence or a WebM instead — both keep the full palette, and any encoder will turn them into a GIF without loss.
QDoes editing the colours damage the animation?+
No. Every edit is stored as a patch over the original document, which is never modified. Undo, redo, reset the palette or hold the Compare button to see the untouched file at any point.