tooling/lottie
A Lottie Player to Preview and Test Animations Online
Drop in a Lottie JSON and play, pause, reverse and scrub the animation in the browser — a Lottie player and previewer with nothing to install.
import lottie from 'lottie-web';
import data from './animation.json';
const anim = lottie.loadAnimation({
container: document.querySelector('#stage'),
renderer: 'svg',
loop: true, autoplay: true,
animationData: data,
});
// anim.setSpeed(0.5); anim.goToAndStop(30, true);01 platform
What a Lottie player does, and what it does not
A Lottie is a JSON animation exported from a design tool, and the thing you most need before shipping one is to see it play and check it behaves. That is what this is — a player and a previewer, honest about not being an authoring tool.
-
Plays the JSON
Drop in a Lottie JSON — or a dotLottie — and it plays through lottie-web, so you see the actual animation a designer exported rather than a static preview image.
-
Controls to test with
Play, pause, reverse, scrub to a frame, loop and change speed — the controls you need to check timing, a specific frame, or how a loop points join.
-
Not a Lottie creator
You do not author animations here — that happens in After Effects or a tool like LottieFiles. This is where you take the exported JSON and confirm it plays as intended before it ships.
-
Private and in the browser
The animation plays client-side and is never uploaded, which matters for unreleased assets, and it keeps working offline as a PWA.
02 deep dive
Play, pause, scrub and re-time
Testing a Lottie is mostly about controlling playback, and lottie-web exposes exactly the handles you need.
Transport is a method call. play, pause, stop and setDirection(-1) for reverse drive the animation, so a preview can offer real controls rather than just autoplay.
Scrub to any frame. goToAndStop(frame) jumps to an exact moment, which is how you check a pose, a hold, or the frame a loop restarts on.
Re-time without re-exporting. setSpeed slows or speeds the whole animation, so you can judge whether a motion is too fast before asking a designer to change the source.
- transport
- play / pause / stop
- reverse
- setDirection(-1)
- scrub
- goToAndStop(frame)
- speed
- setSpeed(0.5)
anim.setSpeed(0.5); // half speed
anim.setDirection(-1); // reverse
anim.goToAndStop(30, true);// jump to frame 30
anim.playSegments([0, 45], true); // a sub-range03 features
What the Lottie player gives you
Everything below is on the moment you open the Lottie editor, which starts as a full player with play, pause, scrub and segment controls.
-
SVG or canvas rendering
lottie-web renders to SVG for crisp scaling or canvas for heavy animations, so you preview in the same renderer you will ship with.
-
JSON and dotLottie
Load a plain Lottie JSON or a compressed .lottie, the two formats designers export, and play either without conversion.
-
The JSON beside the player
The animation data is a file in the project you can open and inspect — a Lottie JSON viewer alongside the player, useful for checking layers and markers.
-
npm for the runtimes
lottie-web and the dotLottie player resolve through esm.sh, so you preview with the exact runtime your app uses.
-
Device frames
Play the animation in phone and tablet frames to check how it scales and performs on smaller screens before it ships.
-
Private and offline
Nothing is uploaded, so an unreleased animation stays yours, and the player keeps working offline as a PWA.
04 deep dive
Dropping a Lottie into a real page
Once an animation checks out, the next question is how it sits in a page, and the editor is a real page to try that in.
Size and fit are CSS. The player renders into a container you style, so you test how the animation scales, crops and sits next to other content with real CSS rather than guessing.
Trigger it from events. Wire play to a click, a scroll position or a state change, so you preview the animation the way it will actually fire in the app, not just on autoplay.
Confirm the runtime. Because you load the same lottie-web or dotLottie runtime your app will, a preview here is a faithful test of what a visitor will see, down to the renderer.
- container
- styled with CSS
- trigger
- click / scroll / state
- renderers
- svg, canvas
- formats
- JSON, dotLottie
const anim = lottie.loadAnimation({
container: el, renderer: 'svg',
loop: false, autoplay: false, animationData: data,
});
button.addEventListener('click', () => anim.play());05 workflow
From a JSON file to a running animation
No install, no upload, no build — the whole loop from a dropped Lottie JSON to a preview you can scrub and re-time.
- new project → Lottie Player
- created player.js · lottie-web via esm.sh
- drop animation.json into the project
- preview: animation plays, looping
- setSpeed(0.5), goToAndStop(30)
- scrubbed to frame 30 · timing checked
- git commit -m "tune playback speed"
- [main 8a3d5c9] tune playback speed · 2 files
-
See it before you ship it
The animation plays in the same runtime your app uses, so the preview is a real test, not an approximation.
-
The same loop on a tablet
Playback runs client-side, so a tablet previews the animation the same way a laptop does, offline if need be.
-
Nothing is uploaded
An unreleased Lottie stays in your browser, which a random online player cannot promise.
06 ecosystem
Lottie among the animation tools
Lottie is one of many things the editor renders — the same tab plays a vector animation, runs a canvas library and previews a page, per file.
07 languages
What the editor runs beside Lottie
A Lottie player sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
Lottie in the browser — common questions
Can I preview and test a Lottie animation here?
Yes. Drop in a Lottie JSON or a .lottie file and it plays through lottie-web with play, pause, reverse, scrub and speed controls, so you can check timing, a specific frame and how a loop joins before shipping it — with nothing to install.
Can I create or edit Lottie animations?
No, and the page is honest about that. Authoring happens in After Effects or a tool like LottieFiles; this is a player and previewer for the exported JSON. You test and tune playback here, not draw the animation.
Which formats does the player accept?
Both the plain Lottie JSON and the compressed dotLottie (.lottie) format that design tools export, played in either the SVG or canvas renderer without any conversion step.
Is my animation uploaded anywhere?
No. The Lottie plays entirely in your browser and nothing is sent to a server, which matters for unreleased assets and is something a random online player cannot promise.
Can I control playback speed and jump to a frame?
Yes. setSpeed re-times the whole animation, goToAndStop jumps to an exact frame, setDirection reverses it and playSegments plays a sub-range — the controls you need to test motion without re-exporting the source.
Can I test how a Lottie sits in a real page?
Yes. The player renders into a container you style with CSS and can trigger from a click, scroll or state change, so you preview the animation the way it will actually fire in your app, in the same runtime it will use.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Lottie player now
A Lottie animation playing with scrub and speed controls in under a minute — private, in the browser, with no account wall and nothing to install.