dotlottie-web

dotLottie Web is the official LottieFiles player for embedding Lottie (.json) and dotLottie (.lottie) animations in web applications. It uses a Rust + WASM core from dotlottie-rs, with ThorVG as the vector renderer. The player supports Canvas2D software rendering, WebGL2, and experimental WebGPU backends; swapping backends is done through subpath imports while keeping the same DotLottie class and API. The project also documents Node.js 18+ isomorphic support for server-side rendering, thumbnail generation, or frame extraction. The player supports dotLottie v2 features including runtime theming with color, scalar, position, vector, gradient, image, and text rules; interactive state machines with typed events; and embedded audio played in lockstep with the animation timeline. A DotLottieWorker option renders on a Web Worker with OffscreenCanvas, and its methods are Promise-based because they cross a worker boundary. The default software backend works broadly, while WebGL2 and WebGPU are opt-in for demand-heavy cases. The repository provides six first-party SDK packages: @lottiefiles/dotlottie-web for vanilla JavaScript, plus React, Vue 3, Svelte, Solid, and a framework-agnostic Web Component package. All render both Lottie JSON and dotLottie files. Runtime controls include multi-animation switching with animationId and loadAnimation, named markers, frame segments, layout fit and align, slots for dynamic data, playback modes such as forward, reverse, bounce, and reverse-bounce, frame interpolation, and freezing when the canvas goes offscreen. The player exposes 25+ typed events, covering load, play, pause, frame, complete, loop, and state-machine transitions. The project includes a hosted viewer with home, playground, performance, list, and embed pages; CodePen examples; and runnable local examples for web, Node.js, React, Vue, Solid, Web Component, and Next.js SSR-safe rendering. Required environment features are WebAssembly, Canvas 2D, and Fetch API; optional enhancements include Web Workers, OffscreenCanvas, WebGL2, and WebGPU. Documented browser minimums are Chrome 57+, Firefox 52+, Safari 11+, Edge 16+, and iOS Safari 11+, with Node.js 18+ for server-side use. The code is MIT licensed.