About this tool
Inspect Lottie JSON before handing it to engineering or shipping it in a landing page. Check size, layer complexity, and asset usage from one screen.
Lottie Inspector is useful when teams need more than simple playback and want to inspect the structure of an animation asset. It helps with debugging layers, assets, markers, and metadata before the file moves deeper into product or motion workflows.
- Reports source and minified bytes, canvas, duration, frame rate, frames, version, colors, fonts, glyphs, and markers.
- Inventories root and precomposition layers, layer types, image and remote assets, expressions, masks, effects, mattes, and 3D layers.
- Exports a structured JSON report and labels documented delivery thresholds as heuristics rather than playback guarantees.
How to use Lottie Inspector
Load the Lottie JSON, review the structural details, and use the inspector output to confirm the file matches your implementation or optimization expectations. If the animation behaves unexpectedly in production, compare the inspector results with the working reference file so you can spot structural drift faster.
When this tool is useful
- Reports source and minified bytes, canvas, duration, frame rate, frames, version, colors, fonts, glyphs, and markers.
- Inventories root and precomposition layers, layer types, image and remote assets, expressions, masks, effects, mattes, and 3D layers.
- Exports a structured JSON report and labels documented delivery thresholds as heuristics rather than playback guarantees.
Examples you can test
Load an example, compare the result with the expected output, then replace it with your own input.
Inspect animation metadata
Example input
Lottie JSON with 120 frames at 60 fps
Expected output
Duration, frame rate, dimensions, and layer summary
Metadata helps confirm whether an animation fits the intended UI slot and playback duration.
Review layer complexity
Example input
Lottie file with many shape layers
Expected output
Layer and asset counts for performance review
Complex animations can affect rendering performance, especially on lower-powered devices.
Validation checklist
- Check dimensions, frame rate, and duration before shipping an animation.
- Review file size and layer count when performance matters.
- Preview the animation in the target app or browser context before publishing.