EasyLottie

Help & Guide

Everything you need to use EasyLottie in your browser

Quick start

EasyLottie is a free, browser-only toolkit for editing Lottie animations. No install, no signup, no upload — every operation runs locally on your machine.

Preview

Upload a Lottie file, watch it play, scrub the timeline, adjust size.

Color Swap

Auto-detect every color in the animation and recolor with live preview.

Image Replace

Swap any embedded image, with pixel-precise crop / scale / ZIP export.

Three-step workflow

  1. 1Drop a .json, .zip, or .apk file onto the tool you want to use.
  2. 2Make your edits — colors, images, or just preview.
  3. 3Click Export to download the result. Done.

Preview tool

/preview renders any Lottie file the moment you drop it in. Use it to verify an animation, inspect its metadata, or quickly hand off to Color Swap / Image Replace.

What it shows

  • Live animation playback with play / pause / loop / speed controls
  • File information: fps, duration, dimensions, layers, asset count
  • Adjustable canvas width / height for preview-at-export-size checks
  • Multi-file list — load several files and switch between them
If your animation references external images, upload it as a .zip with the assets included.

Color Swap tool

/colorswap scans your Lottie for every fill, stroke, and shape color, then lets you replace any of them with live preview.

What it can do

  • Auto-detect every unique color used in the file
  • Show usage count per color so you know what you're changing
  • HEX input and color picker per color
  • Undo / redo (Cmd+Z) with a 20-step history
  • Export the recolored Lottie as JSON or ZIP
Gradients with multiple stops need each stop edited separately. The tool detects them all, just edit one at a time.

Image Replace tool

/imagereplace is our V1.3.0 differentiator — pixel-precise image swap inside any Lottie file, with non-destructive crop, scale, and offset controls.

Typical use cases

  • Brand customization — replace stock product photos with your brand assets
  • Logo swap — drop your logo into a template animation in 30 seconds
  • Localization — generate per-region variants of the same animation
  • A/B testing — produce 5 image variants for conversion tests

Workflow

  1. 1Drop a Lottie file with image assets (inline base64 JSON or ZIP package).
  2. 2Click an image in the live preview, or pick it from the right-side panel.
  3. 3Drop the replacement image (PNG / JPG / WebP) onto the selected layer.
  4. 4Fine-tune position, scale, or crop if the new image has different proportions.
  5. 5Click Export to download a new ZIP with the edited JSON and all assets.

File formats

Input

.jsonStandard Lottie JSON. Works in every tool.
.zipLottie JSON + external image assets bundled. Best for Image Replace.
.apkAndroid animation package. Auto-extracts the Lottie file inside.

Replacement images (Image Replace)

PNGRecommended. Supports transparency.
JPG / JPEGBest for photographic content.
WebPModern format, smaller files.
GIFSupported but convert to PNG when possible.

Size limits

  • Single file: up to 50 MB
  • Replacement image: up to 20 MB
  • For best performance: keep individual images under 5 MB

Troubleshooting

My animation doesn't show after upload
Three common causes:
  • Invalid Lottie JSON — try re-exporting from After Effects with Bodymovin.
  • The file references external images but you uploaded only the JSON. Upload the ZIP instead.
  • Old browser — please use the latest Chrome, Safari, or Firefox.
Color Swap doesn't change every color I expected
  • Gradients with multiple stops need each stop edited separately.
  • Some Lottie layers use blend modes that affect rendered color but not the source color value.
  • Transparent / alpha-channel parts won't recolor — that's the alpha doing its job.
Image Replace says "no embedded images detected"
The tool only works with files that contain image assets. If your animation is built entirely from vector shapes (like a flame or icon animation), there's nothing to replace — try Color Swap instead, which works with shape fills.
Replaced image looks stretched or off-center
If your replacement has different proportions than the original, use the Fine-tune controls (offset X / Y, scale, crop) to dial it in. The tool preserves aspect ratio by default; adjust manually for exact placement.
Stuck? Press F12 to open browser DevTools and check the Console tab — any error message there usually pinpoints the issue.

Pro tips

Efficiency

  • Drag-and-drop is faster than clicking through the file picker.
  • Use Preview first to validate an animation before opening it in Color Swap or Image Replace.
  • Cmd+Z (or Ctrl+Z) undoes the last edit in Color Swap.

Color craft

  • Stick to your brand palette — paste in HEX codes from your design system directly.
  • Keep text-on-background contrast ≥ 4.5:1 for accessibility (WCAG AA).
  • Edit gradient stops to add depth, not just flat color replacements.

Mobile-ready exports

  • Test on a 360-wide viewport — most user phones are narrower than you think.
  • Aim for under 200 KB final Lottie when targeting mobile.
  • Replace high-res images with appropriately sized versions before export.

Ready to edit?

Free forever. No signup. Runs in your browser.

Try Image ReplaceTry Color Swap