npmpackage.info

Gathering detailed insights and metrics for @lottiefiles/dotlottie-wc

@lottiefiles/dotlottie-wc - 0.6.3 | npmpackage.info

@lottiefiles/dotlottie-wc

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.

0.6.3

344

MIT

TypeScript

2.24 MB

Installations

npm install @lottiefiles/dotlottie-wc

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.19.3

NPM Version

10.8.2 Pull Requests

Open

20

Total

418

Closed

19

Merged

379

Issues

Open

30

Total

140

Closed

110

Releases

408

@lottiefiles/dotlottie-web@0.48.0

Updated on Jul 11, 2025

@lottiefiles/dotlottie-vue@0.8.0

Updated on Jul 11, 2025

@lottiefiles/dotlottie-svelte@0.6.3

Updated on Jul 11, 2025

@lottiefiles/dotlottie-react@0.14.3

Updated on Jul 11, 2025

@lottiefiles/dotlottie-wc@0.6.3

Updated on Jul 11, 2025

@lottiefiles/dotlottie-solid@0.3.3

Updated on Jul 11, 2025

View All 408 releases

Languages

TypeScript

JavaScript

CSS

Svelte

HTML

Vue

Shell

TypeScript (78.65%)

JavaScript (15.2%)

CSS (2.52%)

Svelte (1.8%)

HTML (0.96%)

Vue (0.59%)

Shell (0.29%)

Developer

LottieFiles

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

344 Stars

320 Commits

22 Forks

14 Watchers

167 Branches

22 Contributors

Updated on Jul 12, 2025

Maintainers

View All 22 Contributors

Package Meta Information

Latest Version

0.6.3

Package Id

@lottiefiles/dotlottie-wc@0.6.3

Unpacked Size

2.24 MB

Size

247.67 kB

File Count

NPM Version

10.8.2

Node Version

20.19.3

Published on

Jul 11, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

lit @lottiefiles/dotlottie-web

Dev Dependencies

@vitest/browser @vitest/coverage-istanbul cross-env playwright tsup typescript vitest

@lottiefiles/dotlottie-wc

npm npm bundle size npm NPM

Introduction
- What is dotLottie?
Installation
Usage
- Via npm
- Via CDN
APIs
- Attributes
RenderConfig
- Properties
Development
- Setup
- Dev
- Build

Introduction

A web component for rendering and playing Lottie and DotLottie animations in web applications.

What is dotLottie?

dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".

Learn more about dotLottie.

Installation

1npm install @lottiefiles/dotlottie-wc

Usage

Via npm

After installation, you can use dotlottie-wc in your HTML file:

1<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay="true" loop="true"></dotlottie-wc>

And import it in your JavaScript or TypeScript module:

1import '@lottiefiles/dotlottie-wc';

Via CDN

You can also use the component directly via a npm CDN:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8" />
5    <title>@lottiefiles/dotlottie-wc | Basic Example</title>
6</head>
7<body>
8    <dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>
9    <script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
10</body>
11</html>

APIs

Attributes

The dotlottie-wc component accepts all configuration attributes of DotLottie from @lottiefiles/dotlottie-web, allowing you to customize your animation as required.

Attribute	Type	Description
`src`	string	URL of the Lottie or DotLottie animation.
`autoplay`	boolean	Automatically start the animation.
`loop`	boolean	Loop the animation.
`speed`	number	Playback speed.
`data`	string	Animation data as a string or ArrayBuffer for .lottie animations.
`segment`	Array	Animation segment as an array of two numbers (start frame and end frame).
`mode`	string	Animation play mode (e.g., "forward", "bounce").
`backgroundColor`	string	Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000FF").
`renderConfig`	Object (RenderConfig)	Configuration for rendering the animation.

RenderConfig

The renderConfig object accepts the following properties:

Property name	Type	Required	Default	Description
`devicePixelRatio`	number		window.devicePixelRatio \| 1	The device pixel ratio.

Properties

The dotlottie-wc exposes the following properties:

Property name	Type	Description
`dotLottie`	`DotLottie`	The dotLottie instance from `DotLottie` , allowing you to call methods and listen to events for more control over the animation.

Development

Setup

1npm install

Dev

1npm run dev

Build

1npm run build

No vulnerabilities found.

No security vulnerabilities found.

@lottiefiles/dotlottie-wc

Installations

Developer Guide

Yes

ESM

20.19.3

10.8.2

Pull Requests

20

418

19

379

Issues

30

140

110

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

@lottiefiles/dotlottie-wc

Contents

Introduction

What is dotLottie?

Installation

Usage

Via npm

Via CDN

APIs

Attributes

RenderConfig

Properties

Development

Setup

Dev

Build