Edit a Lottie animation for your Svelte app
Svelte Lottie players 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 JSON into your component. No After Effects.
The problem
You mounted lottie-web in onMount or dropped in a Svelte player component, and the animation runs smoothly. But the colors clash with your theme, and the file carries a placeholder asset. The player renders the animation — it offers no way to rewrite per-layer fill colors or replace an embedded image.
Patching the JSON by hand or calling lottie-web override APIs after load is fragile and breaks whenever the file is re-exported. In SvelteKit you also have to guard the player behind a browser check, so layering runtime color patching on top adds exactly the complexity you'd rather avoid.
Sending the file back through a designer and After Effects just to match your brand stalls shipping. You want the animation to be a plain import from your lib or static directory: correct, bundled, and rendered without runtime tinkering.
How EasyLottie solves it
EasyLottie corrects the file before it reaches your project. 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 finds embedded image assets in .json or .zip files and lets you drop in your own, fine-tuning scale and position. Both tools run entirely in the browser — no upload, and no override code inside your Svelte components.
Export a standard Lottie, import it (import anim from '$lib/anim.json'), and hand it to your player. Because the colors and assets are baked in, the component stays minimal with nothing to patch at runtime.
Step-by-step
Download the animation
Get the .json or .zip you plan to render with a Svelte Lottie player or lottie-web, 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 SvelteKit's.
Import it into Svelte
Place the file in $lib or static, import it, and pass it to your player — guarded behind a browser check as usual. No color overrides required.
Real-world use cases
Theme-matched components
Recolor micro-interaction animations to your design tokens so they feel native to your SvelteKit UI.
Light and dark variants
Produce a dark-mode version of the same Lottie and select the source file based on your theme store.
White-label builds
Generate per-client color variants of one base animation for flavored Svelte builds without reopening any source.
Frequently asked questions
Do I need a browser guard for Lottie in SvelteKit?
Yes — Lottie needs the DOM, so the player runs client-side (in onMount or behind a browser check). EasyLottie doesn't change that, but it removes any need for runtime color-override code.
Does the exported file work with Svelte Lottie players?
Yes. The export is standard Lottie JSON with intact structure, which any lottie-web-based Svelte player renders the same as any compatible file.
Can I swap an embedded image for a Svelte 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.