Uwarp
Pulse240 × 24030 fps · 2s1 layer

Drop Lottie JSON

.json — max 8 MB

Speed

Plays in your browser. Image layers need to be embedded in the JSON; a path to another file will not load.

Help Us Improve

—

(—)

Lottie preview and viewer

Open a Lottie JSON file and play it in the browser. Loop, change speed, and set a background. Free, no sign-in.

What is a Lottie preview?

A Lottie preview opens a Lottie JSON animation and plays it. Lottie stores vector motion as JSON — canvas size, frame rate, layers, and keyframes — so the same file can run on the web and in apps. Use this free viewer to drop or paste that JSON, then pause, loop, change speed, or set a background. Playback stays in your browser.

What you can do here

Play a Lottie JSON file without installing a player.

  1. Lottie preview: Drop or paste a Lottie JSON animation and watch it play.

  2. Playback controls: Pause, loop, and set speed from 0.25× to 2×.

  3. Background color: Put a solid color behind the art so light or dark shapes stay visible.

  4. File facts: See the name, pixel size, frame rate, duration, and layer count.

How to preview a Lottie animation

Three steps from a JSON file to playback.

  1. Drop or paste JSON

    Use a .json Bodymovin / Lottie export, or paste the object.

  2. Play it

    The viewer starts automatically. Pause, loop, or change the speed if you need to.

  3. Check the canvas

    Set a background color when the animation is hard to see on white.

Tips for a clear preview

So the file you exported is the file you see.
  • 01

    Export JSON, not a zip

    This viewer reads the Lottie JSON document. A .lottie zip needs to be exported as JSON first.

  • 02

    Embed images

    If a layer points at photo.png on disk, that image will not appear. Embed it in the JSON.

  • 03

    Use the example first

    Reset example loads a short pulse so you can confirm playback before you drop a file.

  • 04

    Slow it down to inspect a frame

    Set speed to 0.25× and pause when you want to look at a single pose.

Great for

Lottie preview jobs.

  • Checking an export

    Confirm a Bodymovin JSON plays before you drop it into an app.

  • Reviewing motion

    Play a file a designer sent, without opening After Effects.

  • Debugging timing

    Read the frame rate and duration, then slow the playback down.

Why preview here

A local Lottie viewer.

  • Local-first

    The JSON is parsed and played in the browser.

  • Free to use

    No account to open a file or change playback.

  • No signup

    Paste JSON and the animation starts.

  • Playback you can adjust

    Loop, speed, and background are on the page, next to the player.

Technical notes

How this Lottie viewer plays a file.
Input
Lottie JSON up to 8 MB, with layers, w, h, fr, and op. The example on the page is a short shape animation.
Player
SVG renderer. Loop and speed apply to the loaded animation. The file is cloned before playback so the source text stays intact.
Assets
Embedded data-URL images can draw. Paths to external files are not requested.
Privacy
FileReader and playback stay on the device. The JSON is not uploaded.

Sources & References

The format this viewer plays.
  • “Lottie is a vector animation format, using JSON to represent its data.”
    — Lottie Docs — A human's guide to the Lottie format

    Lottie Docs — Introduction: Defines the JSON animation this preview parses and plays. lottiefiles.github.io/lottie-docs/Introduction/

  • “The size of the canvas is determined by w and h. Duration is expressed in frames with op, and the framerate is in fr.”
    — Lottie Docs — Animation

    Lottie Docs — Animation: The width, height, frame rate, and duration shown above the player come from these fields. lottiefiles.github.io/lottie-docs/composition/

Frequently Asked Questions

Quick answers about this tool—open a question to read more.