Edit a Lottie animation for your Vue app
vue3-lottie and lottie-web 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 file into your component. No After Effects.
The problem
You dropped a <Vue3Lottie :animationData="anim" /> into a component and it animates perfectly — but the palette fights your design tokens, and the file ships with a placeholder logo. The library plays the animation; it gives you no first-class way to rewrite per-layer fill colors or replace an embedded image.
People reach for lottie-web's color override APIs or hand-patch the JSON, but mapping every shape by index is brittle and breaks whenever the source animation is re-exported. Threading reactive color props through a playback wrapper just to recolor an asset is more plumbing than the job deserves.
Round-tripping the file through a designer and After Effects to align it with your brand colors stalls your build. You want the animation to behave like any other static asset you import: correct on disk, referenced once, shipped without runtime patching.
How EasyLottie solves it
EasyLottie fixes the file before it reaches your src/assets. Color Swap auto-detects every color across fills, strokes, and gradients and lets you reassign each to your exact hex tokens, with a live preview of every change.
Need to swap a logo or illustration too? Image Replace finds 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 reactive color plumbing to maintain in your Vue components.
Export a standard Lottie, import it with import anim from '@/assets/anim.json', and pass it straight to vue3-lottie. Because the colors and assets are already baked in, your template stays a clean one-liner.
Step-by-step
Download the animation
Get the .json or .zip you plan to render with vue3-lottie or lottie-web, from a library or a design 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 tokens
Click each detected color and enter the hex from your design system. 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 Vue's.
Import it into Vue
Drop the file into src/assets, import it, and bind it to <Vue3Lottie :animationData="anim" /> — no color overrides required.
Real-world use cases
Token-matched onboarding
Recolor an onboarding animation to your primary and accent tokens so it feels native instead of pulled from a library.
Light and dark variants
Produce a dark-mode version of the same Lottie and switch source files based on your theme state.
Per-brand builds
Generate color variants of one base animation for multi-tenant or white-label Vue apps without reopening any source file.
Frequently asked questions
Can I recolor a Lottie without lottie-web color overrides?
Yes. Color Swap reassigns every detected color in the file itself, so the animation arrives already matching your theme and your Vue template stays a simple <Vue3Lottie> call.
Does the exported file work with vue3-lottie?
Yes. The export is standard Lottie JSON with intact structure, which vue3-lottie and lottie-web render the same as any compatible Lottie file.
Can I swap an embedded image for a Vue 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 your 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?
No. Only color values change; frames, timing, and structure are untouched, so loop, speed, and controls behave exactly as before.
Ready to try it?
Free, no signup. 30-second workflow. Your file never leaves your browser.