dotLottie Web Player Installation

The dotLottie Web Player (@lottiefiles/dotlottie-web) is the core JavaScript library for rendering Lottie animations on the web. Here's how to install it.

Prerequisites

• Basic understanding of HTML and JavaScript.

• If using npm or yarn: Node.js and npm/yarn installed.

Choose Your Method

You can add the player to your project using a package manager (npm/yarn) or directly via a CDN.

1. Using npm

This is the recommended method for projects using build tools (like Webpack, Vite, Parcel).

npm install @lottiefiles/dotlottie-web

After installation, you can import the player in your JavaScript/TypeScript files:

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

2. Using yarn

Alternatively, use yarn:

yarn add @lottiefiles/dotlottie-web

Import as shown in the npm example.

3. Using CDN

For quick integration or projects without a build system, use the CDN link. This makes the DotLottie class globally available.

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

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

Framework Users

If you are using React, Vue, Svelte, or Web Components, we recommend using their dedicated wrapper packages for the best integration experience. Please refer back to the Quick Start Guide for links to their specific installation instructions.

Next Steps

• Learn about Basic Usage

• Explore the full API Reference