lottieditorLottie preview and viewer
Drop your Lottie file here
.json or .lottie · Up to 80 MBHow to preview a Lottie file online
- Upload a .json or .lottie animation.
- Play, pause, or scrub through the frames. Change the preview speed or background to inspect the motion.
- Choose Open in editor to work on the animation.
Check the animation before editing
The file panel shows the canvas dimensions, duration, and frame rate. Scrub to the first and last frames to check the loop. A contrasting preview background makes pale shapes and transparent areas easier to see.
Lottie JSON and dotLottie
Lottie JSON describes an animation. A dotLottie file packages animation data and can include image assets. The previewer accepts both formats. To choose between multiple animations in an archive, use the dotLottie to JSON tool.
Check the loop boundary
Pause on First frame and Last frame, then play through several cycles. The last displayed frame comes before the loop boundary, so it need not look identical to the first. Look for a sudden position jump or an unintended pause. Preview speed changes playback here, not the file you open in the editor.
If the preview is blank
Try the sample to check that the player loads. Confirm your upload is animation JSON, not a project backup. Missing linked images need to be embedded or included in a supported dotLottie archive. Expressions are disabled in this preview. A browser preview does not prove that native iOS or Android playback will match.
What opens in the editor
A generic imported Lottie file opens as a composition, not as individually editable shape layers. Native Lottieditor projects keep their editable layers and keyframes. To change supported colors or timing in an imported file, use the standalone tools.
Use your animation on a website
Once the file plays correctly, add it to your site with a working example. Replace the tutorial sample with your JSON and test playback, sizing, and reduced motion.