Install the dotLottie web player

To render Lottie animations in your web project, add the @lottiefiles/dotlottie-web package with your package manager, or load it from a CDN if you don't use a build step.

Install with a package manager

If your project uses a bundler (Webpack, Vite, Parcel, and similar), install the package:

Then import the player in your JavaScript or TypeScript files:

import { DotLottie } from "@lottiefiles/dotlottie-web";

Load from a CDN

If you don't have a build system, or you want to prototype quickly, import the player directly from a CDN inside a module script:

<script type="module">
  import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";

  // You can now use new DotLottie(...)
</script>

Using a framework?

If you work with React, Vue, Svelte, or Web Components, use the dedicated wrapper package for your framework instead of the core player. The Quick Start Guide links to the installation instructions for each wrapper.

Next steps

• Follow the first animation tutorial to get an animation playing

• Browse the API Reference for all configuration options