Generate Embed Code Instantly

Lottie Embed Code
Generator

Generate production-ready embed code for your Lottie animations. Supports HTML, React, Vue, dotLottie & Web Component. Live preview included.

⚙️ Configuration

Drop .json file or click
— or paste URL —
1×

▶ Live Preview

Upload a Lottie file or paste URL to preview
HTML 
// Upload a Lottie file or paste a URL to generate embed code

Need Custom Lottie Animations?

I create professional Lottie animations from scratch — icons, loaders, UI micro-interactions, and explainer videos. 250+ projects, 100% Job Success.

Hire Me on Upwork — From $120

Frequently Asked Questions

How do I embed a Lottie animation in HTML?
Include the lottie-web library via CDN (<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js">), add a container div, and call lottie.loadAnimation() with your configuration. This generator creates the complete code for you.
SVG vs Canvas vs HTML renderer — which should I use?
SVG is the default — sharp at any resolution, supports all Lottie features, and is accessible. Use Canvas for complex animations with 1000+ shapes to reduce DOM overhead. HTML renderer is lightweight but has limited feature support.
How to use Lottie in React?
Install lottie-react via npm, import the component, and pass your animation JSON as the animationData prop. This generator creates a complete React component with hooks.
What is dotLottie?
dotLottie (.lottie) is a compressed format that bundles Lottie JSON + assets into a ZIP file, reducing size by up to 80%. Use the <dotlottie-player> web component to embed it.
Can I control speed, direction, and segments?
Yes — lottie-web provides setSpeed(), setDirection(), and playSegments() methods. React and Vue wrappers expose these as props. This generator configures speed for you.

How to Embed Lottie Animations: The Complete Developer Guide

Lottie animations bring web and mobile interfaces to life with smooth, scalable vector animations. But getting the embed code right — especially across different frameworks — can be tricky. This free tool generates production-ready code for all major platforms.

HTML Embed with lottie-web

The most common approach: include the lottie-web library via CDN, create a container element, and initialize with lottie.loadAnimation(). Choose between SVG, Canvas, or HTML renderers depending on your animation complexity and performance requirements.

React Integration

For React apps, the lottie-react package provides a clean component interface. Import your JSON, pass it as animationData, and control playback via props. The component handles cleanup and re-rendering automatically.

Vue Integration

Vue developers can use vue3-lottie or directly integrate lottie-web in a component with onMounted lifecycle hook. This generator outputs clean Vue 3 Composition API code.

dotLottie Player

For the simplest embed experience, dotLottie's <dotlottie-player> web component requires just a script tag and one custom element. No JavaScript configuration needed — everything is set via HTML attributes.

Built by a Lottie Expert

This tool was built by — 13+ years experience, 250+ Lottie projects. Hire Sergey for custom Lottie animations. Also check out the Lottie JSON Optimizer & Analyzer.