Dotlottie Web
dotLottie Web
Official LottieFiles players for running .lottie and Lottie animations on the web.
A core canvas/WASM renderer with framework wrappers for React, Vue, Svelte, Solid, and Web Components.
Packages
| Package | Description |
|---|---|
| @lottiefiles/dotlottie-web | Core player — canvas rendering with WASM, works in browser and Node.js |
| @lottiefiles/dotlottie-react | React component |
| @lottiefiles/dotlottie-vue | Vue component |
| @lottiefiles/dotlottie-svelte | Svelte component |
| @lottiefiles/dotlottie-solid | Solid component |
| @lottiefiles/dotlottie-wc | Web Component |
Each package README has full API documentation and usage examples.
Quick Start
Install the core package or a framework wrapper:
# Core
npm install @lottiefiles/dotlottie-web
# React
npm install @lottiefiles/dotlottie-react
# Vue
npm install @lottiefiles/dotlottie-vue
# Svelte
npm install @lottiefiles/dotlottie-svelte
# Solid
npm install @lottiefiles/dotlottie-solid
# Web Component
npm install @lottiefiles/dotlottie-wc
import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({
canvas: document.getElementById('canvas'),
src: 'https://your-animation-url.lottie',
autoplay: true,
loop: true,
});
Live Examples
@lottiefiles/dotlottie-web Getting Started · Playback Controls · Dynamic Loading · Multi Animations · Advanced Layout · Named Markers · Theming
@lottiefiles/dotlottie-react Getting Started · Custom Controls
@lottiefiles/dotlottie-vue Getting Started
Viewer
The dotLottie Viewer is a hosted tool for testing and debugging animations:
| Page | Description |
|---|---|
| Home | Drop a .lottie or .json file to preview playback and rendering |
| Playground | Experiment with player configuration and animation controls |
| Performance | Benchmark rendering performance across animations |
Source: apps/viewer/
Local Examples
Example apps in examples/:
| Example | Package |
|---|---|
| web | @lottiefiles/dotlottie-web |
| web-node | @lottiefiles/dotlottie-web (Node.js) |
| react | @lottiefiles/dotlottie-react |
| vue | @lottiefiles/dotlottie-vue |
| solid | @lottiefiles/dotlottie-solid |
| wc | @lottiefiles/dotlottie-wc |
| next | @lottiefiles/dotlottie-react (Next.js) |
pnpm install && pnpm run build
cd examples/web
pnpm run dev
Development
Prerequisites: Node.js 22+, pnpm 10+
git clone https://github.com/LottieFiles/dotlottie-web.git
cd dotlottie-web
pnpm install
pnpm run build # Build all packages
pnpm run dev # Watch mode
pnpm run test # Run tests
pnpm run lint # Lint
pnpm run format # Format
Contributing
See Contributing Guidelines and Code of Conduct.
License
