RAFAYLABS
BUILD • INNOVATE • SCALE
FREE CLIENT-SIDE DEVELOPER TOOL

Free Lottie Preview and Lottie JSON Viewer

Drop in a Lottie .json or .lottie file to play it, step through it frame by frame and check its size, frame rate, duration and layers. Convert JSON to the smaller .lottie format, turn a .lottie back into JSON, or save any frame as a PNG. Everything runs in your browser.

Free, no sign-up. Your files never leave your device.

How to use it

  1. Drop a Lottie .json or .lottie file into the box, or click to choose one.
  2. Play, pause or drag the frame slider. Change the speed, turn looping on or off, and pick a background to check how the animation looks on light and dark screens.
  3. Check the details: size, frame rate, frames, duration, layers and images. Open the layer list to find the names you need to recolour layers in code.
  4. Download what you need: the animation as .lottie, as minified or readable JSON, or the current frame as a PNG.

What is inside a Lottie JSON file?

A Lottie file is a JSON description of an After Effects animation, exported with the Bodymovin plugin. When you open one in this Lottie JSON viewer, these are the fields it reads:

  • w and h: the width and height of the animation in pixels.
  • fr: the frame rate, usually 24, 30 or 60.
  • ip and op: the first and last frame, which together with fr give the duration.
  • layers: the shapes, text and images that make up the animation, each with its own name.
  • assets: images and precompositions that layers reuse.

Check a Lottie before you put it in an app

Preview the file here before adding it to a website or app. Look at the file size, because a large JSON slows down the first screen, and convert it to .lottie if it is big. Play it on a dark background to catch shapes that disappear in dark mode, and step through the last frames to make sure the loop is smooth.

For the code side, see how to use Lottie in React Native, and Lottie vs GIF for when an animation is worth it at all.

Frequently asked questions

Is this Lottie preview tool free?
Yes. No sign-up, no limits, and your file is never uploaded. It is played in your browser.
How do I view a Lottie JSON file online?
Drop the .json file into this Lottie JSON viewer. It plays the animation straight away and shows its size, frame rate, duration and layers, without installing anything or uploading the file.
What is the difference between a .json and a .lottie file?
Both hold the same animation. A .lottie file is a zipped package that is usually much smaller than the JSON, and it can also hold images and several animations.
How do I convert Lottie JSON to .lottie?
Drop the JSON file here and choose Convert to .lottie. The tool shows how much smaller the new file is before you download it.
Can I convert a .lottie file back to JSON?
Yes. Drop the .lottie file and choose Convert to JSON. Images packed inside the .lottie are embedded in the JSON, so it works on its own.
Why does my animation look different here than in After Effects?
Lottie supports most, but not all, After Effects features. Some effects and expressions do not export. If something is missing here, it will usually be missing in your app too.
How do I find layer names for colorFilters?
Open the Layers list under the details. Those names are the keypaths you pass to colorFilters in lottie-react-native to recolour a layer.
RafayLabs Product Studio

Need a custom tool, mobile app, or SaaS?

RafayLabs builds production-grade cross-platform apps and AI workflows for founders. I average a 4-week turnaround from kickoff to App Store release.

Book a 15-min discovery call

More free developer tools