JSON Animation Viewer makes it simple to preview Lottie animation files directly in your browser. No software to install, no accounts to create, and no files uploaded to any server. Everything runs locally on your device. This guide walks you through every feature so you can get the most out of the tool.
Navigate to the JSON Animation Viewer homepage. You'll see a clean interface with a large drop zone in the center of the screen. The viewer is ready to accept your animation file right away. There's no login required and nothing to configure before you start.
You have two ways to load a Lottie JSON file into the viewer:
Only valid Lottie JSON files are supported. If you try to load a different file type, the viewer will let you know that the format isn't recognized. Make sure your file has a .json extension and contains valid Lottie animation data.
Once your file loads, the animation starts playing automatically. You'll see it rendered in the viewport at its original dimensions. The file name appears above the animation so you can confirm you've loaded the correct file, which is especially helpful when you're working with multiple animation files during a project.
The viewer uses the official lottie-web library from Airbnb to render animations. This means what you see in the viewer is exactly what your users will see when the animation runs in production. Colors, timing, easing curves, and layer compositions all render faithfully.
Below the animation viewport, you'll find a size slider. Drag it left to shrink the animation or right to enlarge it. This lets you test how your animation looks at different sizes without editing the source file. The size adjustment happens in real time, so you can see the effect immediately.
The original dimensions of the animation (width and height in pixels) are displayed alongside the viewport. This information is pulled directly from the JSON data and tells you the intended render size set by the animator. Knowing these dimensions helps you plan CSS layouts and container sizes in your application.
The viewer automatically extracts and displays key metadata from your animation file. You can see the original width and height, which tells you the aspect ratio the designer intended. This is valuable when you need to set up responsive containers or decide on breakpoints for different screen sizes.
Pay attention to the animation's playback behavior. Lottie animations loop by default in the viewer, giving you a continuous preview. Watch for any visual glitches, unexpected layer ordering, or timing issues that might need fixing in your After Effects project before final export.
Want to preview another file? Simply drag a new JSON file onto the viewer or click the select button again. The previous animation is replaced immediately. There's no limit to how many files you can preview in a session. Since everything runs in your browser, switching between files is instant.
Your animation files never leave your device. JSON Animation Viewer processes everything locally using JavaScript in your browser. There are no server uploads, no analytics tracking your files, and no data stored anywhere. When you close the tab, your animation data is gone. This makes the viewer safe for previewing proprietary animations and confidential project assets.
JSON Animation Viewer supports standard Lottie JSON files exported from Adobe After Effects using the Bodymovin plugin. It also works with animations created in other tools that output the Lottie JSON format, such as Haiku Animator, LottieFiles editor, and Figma plugins that export to Lottie. The file must be a valid .json file containing Lottie animation data. DotLottie (.lottie) files are not currently supported.
If you run into any issues or have questions about using the viewer, check our FAQ page for answers to common questions. You can also visit our GitHub Issues page to report bugs or request features.