Lottie Player Script Generator
Generate ready-to-paste HTML to embed your Lottie animation with a web-component player
1. Upload your Lottie file
Drag & drop your file here or click to browse
Supports .json and .lottie files (max. 10MB)
Preview
Upload a Lottie file to see the preview
The Free Lottie Player Script Generator
Want to embed a Lottie animation in plain HTML? Our free player script generator writes the boilerplate for you — a CDN script tag plus a configured web-component player you can paste anywhere.
Choose between lottie-player and dotlottie-player, set autoplay, loop, controls, speed and size, then copy the snippet or download an HTML file. No build step, no framework — it works in any page. The code is generated locally in your browser.
How to Generate a Lottie Embed Snippet
Embedding a Lottie by hand means remembering the right script URL and attributes. This tool writes it for you:
Upload your Lottie file
Drag and drop or browse for a .json or .lottie file (up to 10MB). Width and height are read from the animation.
Choose player and options
Pick the player library and set autoplay, loop, controls, speed, size and the path to your hosted animation.
Generate the snippet
Click Generate to produce the full HTML, shown in the Code tab.
Copy or download
Copy the code to your clipboard or download an HTML file, then paste it into your page.
No bundler, no account, no server uploads — get a working embed in under a minute.
Key Features
Two Player Libraries
Generate for lottie-player (classic .json) or dotlottie-player (also supports the compact .lottie format) — whichever fits your stack.
CDN Script Included
The snippet loads the player from a CDN with a single script tag, so it runs in any plain HTML page with no build step.
Full Playback Options
Toggle autoplay, loop and controls, and set playback speed and pixel size — all reflected in the generated tag.
Copy-Paste Ready
The output is clean, formatted HTML — copy it straight in or download an .html file to start from.
Popular Use Cases
Drop Into a Landing Page
Add an animated hero or accent to a static landing page without wiring up a framework.
Add to a CMS or No-Code Site
Paste the snippet into a custom-HTML block on Webflow, WordPress, or a site builder.
Prototype Quickly
Spin up a quick HTML file to test how an animation looks and plays before integrating it properly.
Hand Off to Non-Framework Devs
Give teammates a self-contained snippet they can use without React, Vue, or a toolchain.
Documentation Examples
Embed live animations in docs and guides with a copy-paste block readers can reuse.
Email-Style Showcases
Build a simple HTML showcase page for a set of animations using the same player tag.
Pro Tips
Host your animation file
The snippet loads the animation by URL. Put your .json/.lottie on your server or a CDN and update the src path.
Pin the CDN version for production
The default uses @latest for convenience. For production, replace it with a specific version to avoid surprises.
Use dotlottie-player for .lottie
If you ship the compact .lottie format, choose dotlottie-player and point src at your .lottie file.
Match the size to your animation
Width and height default to the animation’s dimensions. Adjust them to fit your layout without distortion.
Privacy and Security
We take your privacy seriously. Unlike most online converters that upload your files to remote servers, our tool processes everything locally.
No uploads – Your files are processed entirely in your browser. They never touch our servers.
No tracking – We don't log which files you convert or what settings you use.
No accounts – Use the tool immediately. No registration, no personal data required.
Inspect it yourself – Open DevTools and watch the network tab. You'll see zero file uploads.
Frequently Asked Questions
Everything you need to know about Lottie animations and our tools.
Which player should I use?
lottie-player works with classic .json animations. dotlottie-player also supports the compact .lottie format. Both are web components you drop into any HTML page.
Where do I put my animation file?
Host your .json (or .lottie) file and point the src attribute at it. By default the snippet uses a relative path like “animation.json” — change it to your hosted URL or path.
Do I need a build step?
No. The snippet loads the player from a CDN with a script tag and uses a custom element, so it works in plain HTML — no bundler required.
What do autoplay, loop and controls do?
Autoplay starts the animation on load, loop repeats it, and controls show a play/scrub bar. Each is a checkbox that toggles the matching attribute in the generated tag.
Can I set the playback speed and size?
Yes. Speed accepts 0.1–10× and the width/height set the player’s pixel size (they default to your animation’s dimensions).
Is the generated code production-ready?
It is a clean starting point. For production you may want to pin the CDN version and self-host the player and animation for reliability.
Are my files uploaded to a server?
No. The code is generated locally in your browser. Your animation file never leaves your device.
Is it free?
Completely free, with no registration, watermarks, or usage limits.