dotLottie Converter & Player (Windows/Mac)Workspace

Using the App

The app opens with two tabs at the top of the window: Converter and Player. Click either one to switch — the app remembers which tab you were last on, so it reopens there next time.

Converting JSON to dotLottie

  1. Switch to the Converter tab.
  2. Either:
    • Click Select JSON Files and choose one or more .json files, or
    • Drag and drop one or more .json files onto the drop zone.
  3. The app converts each file and shows a success message (e.g., "Successfully converted 3 files").
  4. Your new .lottie file(s) are saved in the same folder as the original .json file, with the same name (e.g. my-animation.json → my-animation.lottie).

After converting, two buttons appear:

  • Open Output Folder: opens the folder containing your converted file(s) in File Explorer / Finder.
  • Preview in Player: instantly switches to the Player tab and loads the file you just converted, so you can check it looks right.

If a file fails to convert, it's usually because it isn't valid Lottie JSON. The app will tell you how many files succeeded and how many failed.

Playing and Previewing Animations

  1. Switch to the Player tab.
  2. Open a file by:
    • Clicking Preview Animation and choosing a .lottie or .json file,
    • Dragging and dropping a file onto the drop zone, or
    • Choosing a file from File → Recent (see below).

Playback Controls

Along the bottom of the Player tab:

ControlWhat it does
▶ / ❚❚Play or pause the animation (also toggled with the Space key)
Loop iconTurns looping on or off
Speed dropdownChanges playback speed, from 0.25× to 3×
ScrubberDrag to jump to any point in the animation; shows the current frame and time
Left/Right arrow keysStep one frame at a time (hold Shift to jump 10 frames at a time)
Folder iconOpen a different animation file
✕ iconClose the current preview and return to the file picker

Background & Zoom

  • Background swatches (dark / light / checkerboard) let you preview your animation against different backgrounds — the checkerboard is especially useful for checking transparency.
  • Click the color swatch to pick any custom background color.
  • Zoom controls: "Fit" scales the animation to the window automatically (the default), "1:1" shows it at its actual pixel size, and +/− let you zoom manually.

File Information Panel

Click the ⓘ icon to open the File Information panel, showing the file name, type, size, pixel dimensions, frame rate, frame count, duration, Lottie version, and layer count — handy for confirming an animation was exported the way you expect.

Multiple Animations in One File

Some .lottie files bundle several animation variants together (for example, light/dark theme versions). If the file you open has more than one, a list appears in the File Information panel so you can switch between them.

Managing Recent Files

The Player keeps a list of the last few files you’ve previewed under File → Recent. Hover over an entry to reveal a small ✕ button, which removes just that entry from the list (it doesn’t delete the actual file).

Keyboard Shortcuts

ShortcutAction
Ctrl/Cmd + OOpen files (Select JSON Files on the Converter tab, or Preview Animation on the Player tab)
SpacePlay / pause the current animation (Player tab)
← / →Step backward / forward one frame (Player tab)
Shift + ← / Shift + →Step backward / forward 10 frames (Player tab)
Was this page helpful?