PixelOkay/ Developer Tools / Lottie Animation Previewer
Private · On-deviceDeveloper tools ↗
Tools
CREATOR WORKSPACE / ANIMATION

Lottie Animation Previewer

Explore every frame. Inspect vector layers, fine-tune colors, and export animations—right in your browser.

LIVE PREVIEW

Floating Shapes

4.00 seconds · 30 fps
PIXELOKAY · LIVE
00:00.00/ 00:04.00
FRAME 0Playing · Loop
03

Animation insights

COMPATIBILITY
Made for motion designers, developers & curious minds.

All rendering happens in your browser. This editor supports common 2D Lottie vectors, gradients and precomps—not every Bodymovin feature.

Explore developer tools ↗

Using Lottie Animation Previewer

Preview and make limited vector edits to a 2D Lottie animation in the browser. Inspect layers, hide or solo them, adjust supported solid colors, then export edited Lottie JSON or a rendered preview.

Workflow

  1. Open a Lottie JSON or supplied example and confirm it renders
  2. scrub the timeline and inspect layers
  3. export edited JSON or a bounded GIF, contact sheet, or silent video.

Example

Load floating shapes, solo a vector layer, recolor a solid fill, then export edited JSON and a short GIF. Unsupported JSON properties remain in the JSON even when they cannot render.

Limits and data handling

Canvas renderer for a subset of 2D Lottie. Text/raster layers, 3D, expressions, masks/mattes and many effects are unsupported; precomps stop at depth five. GIF caps at 640 px, 240 frames and 12 million pixels; silent video at 1280 px, 30 fps and 15 seconds, with browser-dependent codecs. Workspace backups and edited Lottie JSON are separate. Drafts remain in browser storage.

FAQs

Will every Lottie file render like its source app?

No. Unsupported features may not appear, though their JSON properties are retained in edited JSON.

Does video export include audio?

No. The video preview is silent and recording format depends on browser support.

Related tools