Edit a Lottie animation for your Next.js app
lottie-react and dotlottie-react render the file — they don't change what's inside it. Recolor layers and replace images to match your theme in the browser, then import the JSON into a client component. No After Effects.
The problem
You imported animationData into a 'use client' component, rendered <Lottie animationData={anim} />, and it plays great. But the colors don't match your theme, and the file ships with a placeholder graphic. lottie-react plays the animation — it gives you no API to rewrite fill colors per layer or replace an embedded image.
Hand-editing the JSON or wiring color overrides through the player is brittle and breaks on every re-export. And because Lottie needs the DOM, you're already juggling dynamic imports and 'use client' boundaries — adding runtime color patching on top is exactly the kind of complexity you want to keep out of a React Server Components app.
Bouncing the file back through a designer and After Effects to match your brand stalls shipping. You want the animation to be a plain import from your app or public directory: correct, tree-shaken, and rendered without runtime tinkering.
How EasyLottie solves it
EasyLottie fixes the file before it enters your repo. Color Swap auto-detects every color across fills, strokes, and gradients and lets you reassign each to your exact theme hex values, with a live preview of every change.
Need to swap a logo or illustration? Image Replace detects embedded image assets in .json or .zip files and lets you drop in your own, fine-tuning scale and position. Both tools run 100% locally — no upload, and no color-override code inside your client components.
Export a standard Lottie, import it into a client component (import anim from '@/animations/anim.json'), and pass it to lottie-react. Because the colors and assets are baked in, the component stays a clean one-liner with no runtime patching to hydrate.
Step-by-step
Download the animation
Get the .json or .zip you plan to render with lottie-react or dotlottie-react, from a library or a handoff.
Open the right EasyLottie tool
Use Color Swap at easylottie.com/colorswap to match your theme, or Image Replace to swap logos and illustrations — both run in the browser.
Recolor to your theme
Click each detected color and enter the hex from your design tokens. The live preview confirms the animation matches your brand.
Export the file
Click Export to download a standard Lottie JSON or ZIP with valid asset references, ready for any Lottie runtime including Next.js's.
Import it into Next.js
Place the file in your app, import it in a 'use client' component, and render <Lottie animationData={anim} /> — no color overrides required.
Real-world use cases
Theme-matched marketing pages
Recolor hero and feature animations to your brand palette so a Next.js landing page feels designed, not assembled from a library.
Light and dark variants
Produce a dark-mode version of the same Lottie and pick the source file based on your theme provider.
Multi-brand sites
Generate per-brand color variants of one base animation for multi-tenant Next.js apps without reopening any source.
Frequently asked questions
Do I still need 'use client' for Lottie in Next.js?
Yes — Lottie needs the browser DOM, so the player runs in a client component. Recoloring in EasyLottie doesn't change that, but it does remove any need for runtime color-override code inside that component.
Does the exported file work with lottie-react?
Yes. The export is standard Lottie JSON with intact structure, which lottie-react and dotlottie-react render the same as any compatible file.
Can I swap an embedded image for a Next.js animation?
Yes. Image Replace detects embedded image assets in JSON or ZIP files and lets you replace them, then export a file you can import straight into a component.
Is my file uploaded during editing?
No. Both tools are 100% local and browser-only — your animation and assets never leave your machine.
Will recoloring break playback or SSR?
No. Only color values change; structure and timing are untouched, and since the data is static JSON it imports and hydrates exactly as before.
Ready to try it?
Free, no signup. 30-second workflow. Your file never leaves your browser.