About the Lottie Inspector
Lottie files are JSON documents that describe vector animations exported from After Effects. When designers use vector-only effects, the resulting file is typically a few kilobytes. But when an animation includes effects that can't be expressed as vectors — particle systems, fluid dynamics, image-based textures — the Bodymovin exporter embeds each frame as a base64-encoded PNG inside the JSON. A short 5-second animation at 30 fps can easily exceed 50 MB this way.
The Inspector tells you exactly where the bytes go. It parses the JSON locally in your browser, separates the embedded raster bytes from the vector and structural data, and ranks the embedded image assets by size so you can spot the worst offenders. The editor lets you make changes directly — strip a redundant asset, lower the frame rate, fix a typo — with undo/redo and live validation against the basic Lottie schema.
How the analysis works
- Parse the file. JSON files are parsed natively; .lottie containers are unzipped in-browser using fflate and the first animation entry is extracted. Nothing leaves your machine.
- Walk the asset table. Every entry in the assets array is inspected. Assets whose p field is a data: URL are treated as embedded raster; their base64 length contributes directly to the file's total bytes.
- Sum and rank. Vector vs raster percentages are computed from byte counts, not asset counts. The asset table sorts by raw JSON footprint, which is what actually drives file size — a smaller decoded image with longer base64 padding can outweigh a visually larger one.
Editing safely
Every value edit is type-locked: a number stays a number, a string stays a string. This prevents the most common way to break a Lottie file with a careless edit. The validator checks structural sanity — required fields fr, w, h, ip, op are present and numeric; the frame range is valid; layer refId references still match an existing asset id — and flags problems inline so you can fix them before downloading.