@lottiefiles/dotlottie-web

!npm
!npm bundle size
!npm
!jsDelivr hits (npm scoped)
!NPM

Table of Contents

* Introduction
* What is dotLottie?
* Documentation
* Supported Platforms
* Browser Requirements
* Live Examples
* Contributing
* Issues

Introduction

@lottiefiles/dotlottie-web is a JavaScript library for rendering Lottie and dotLottie animations in Node.js and web environments. It provides a simple and intuitive API for loading, playing, and controlling animations, as well as advanced features like interactivity and theming.

$3

dotLottie is an open-source file format that bundles one or more Lottie animations along with their assets into a single, compressed .lottie file. It uses ZIP compression for efficient storage and distribution. The format also supports advanced features like interactivity and theming, making it a powerful tool for creating dynamic and interactive animations.

Learn more about dotLottie.

Documentation

To get started with @lottiefiles/dotlottie-web, follow the documentation here.

Supported Platforms

@lottiefiles/dotlottie-web is an isomorphic library designed to work in both browser and Node.js environments. It supports Node.js version 18 and higher, as well as all major web browsers.

$3

The library requires modern browser features for optimal performance. The following browser APIs are essential:

| Feature | Required | Can I Use |
| ------------------- | ---------- | -------------------------------------------------------------- |
| WebAssembly | ✅ Yes | WebAssembly support |
| Canvas 2D API | ✅ Yes | Canvas 2D support |
| Fetch API | ✅ Yes | Fetch API support |
| Web Workers | Optional\* | Web Workers support |
| OffscreenCanvas | Optional\* | OffscreenCanvas support |

\*Optional features enhance performance but aren't required for basic functionality.

#### Minimum Browser Versions

Based on WebAssembly support requirements:

* Chrome: 57+ (March 2017)
* Firefox: 52+ (March 2017)
* Safari: 11+ (September 2017)
* Edge: 16+ (October 2017)
* Opera: 44+ (March 2017)
* iOS Safari: 11+ (September 2017)
* Android Browser: 81+ (February 2020)

#### Enhanced Features

* Web Workers: Enable background processing for better performance
* OffscreenCanvas: Allow rendering on worker threads for improved responsiveness

For legacy browser support, consider using WebAssembly polyfills, though performance may be significantly reduced.

Live Examples

Explore these CodePen examples to see @lottiefiles/dotlottie-web in action:

* Getting Started
* Controlling Animation Playback
* Dynamic Animation Loading
* dotLottie Worker
* Multi Animations .lottie file
* Advanced Animation Layout
* Named Markers
* dotLottie Theming
* dotLottie Interactivity

Contributing

We welcome contributions! Please see our contributing guidelines for more details on how to get started with the project locally.

Issues

Encountered a problem or have a feature request? Log an issue in our issues tab. You can also browse through older issues and discussions to find solutions to common problems.