Getting Started


Streamline your web animations with LottieFiles’ official players for dotLottie and Lottie animations. Designed for quick integration, these packages help developers swiftly bring animated visuals into web projects with minimal effort.

This player is powered by our multi-platform player dotlottie-rs.

dotLottie-web is our core web player that other framework-specific players are built on.


Terminal window
npm install @lottiefiles/dotlottie-web


Via npm

After installation, you can import DotLottie in your JavaScript or TypeScript module:

<!-- Canvas element where the animation will be rendered -->
<canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>
import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({
autoplay: true,
loop: true,
canvas: document.querySelector('#dotlottie-canvas'),
src: "", // or .json file

via CDN

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
content="width=device-width, initial-scale=1, shrink-to-fit=no"
<title>@lottiefiles/dotlottie-web | basic example</title>
<!-- Canvas element where the Lottie animation will be rendered -->
<canvas id="canvas" width="300" height="300"></canvas>
<script type="module">
import { DotLottie } from "";
new DotLottie({
autoplay: true,
loop: true,
canvas: document.getElementById("canvas"),
src: "", // or .json file