dotLottie Web Component Attributes and Properties Reference

The <dotlottie-wc> element is configured through HTML attributes and JavaScript properties. Attributes cover declarative configuration; properties cover values that cannot be expressed as attribute strings and access to the core player instance.

Attributes

Boolean attributes are enabled by adding the attribute without a value (e.g. <dotlottie-wc src="..." autoplay loop>).

Attribute	Type	Default	Description
`src`	`string`	`undefined`	Required. Source URL or path to the `.lottie` or `.json` animation file.
`autoplay`	`boolean`	`false`	Plays the animation automatically when loaded.
`loop`	`boolean`	`false`	Loops the animation.
`speed`	`number`	`1`	Playback speed of the animation.
`data`	`string \| ArrayBuffer`	`undefined`	Animation data as a Lottie JSON string, or as an ArrayBuffer for `.lottie` animations. ArrayBuffer data must be set via the JavaScript property, not the attribute.
`segment`	`string`	`undefined`	Animation segment as a stringified array of two numbers: start frame and end frame (e.g. `"[10, 50]"`).
`mode`	`"forward" \| "reverse" \| "bounce" \| "reverse-bounce"`	`"forward"`	Animation play mode.
`backgroundColor`	`string`	`undefined`	Background color of the canvas. Accepts a 6-digit or 8-digit hex color string (e.g. `"#000000FF"`).
`themeId`	`string`	`undefined`	ID of the dotLottie theme to initially use.
`animationId`	`string`	`undefined`	ID of the animation to load from a multi-animation `.lottie` file.
`marker`	`string`	`undefined`	Named lottie marker to play.
`useFrameInterpolation`	`boolean`	`true`	Determines whether the animation updates on subframes. `false` produces discrete frame-by-frame playback.
`loopCount`	`number`	`0`	Number of times the animation loops before stopping. `0` loops infinitely when `loop` is present.
`stateMachineId`	`string`	`undefined`	ID of the state machine to load on animation load.

Examples

<dotlottie-wc src="https://example.com/animation.lottie" autoplay loop speed="2"></dotlottie-wc>

<dotlottie-wc src="animation.lottie" mode="bounce" segment="[10, 50]" backgroundColor="#f0f0f0ff"></dotlottie-wc>

<dotlottie-wc src="multi.lottie" animationId="scene-2" themeId="dark-mode"></dotlottie-wc>

Properties

These properties are set or read via JavaScript on the element instance, not as HTML attributes.

Property	Type	Description
`dotLottie`	`DotLottie` (read-only)	The underlying core `DotLottie` instance, exposing all core methods and event listeners for programmatic control. Available after the element's `load` event fires.
`renderConfig`	`RenderConfig`	Configuration for rendering the animation. See Render configuration.
`layout`	`Layout`	Layout configuration with `fit` and `align` properties. See Layout configuration.
`themeData`	`string`	Raw theme JSON string to apply directly, as an alternative to `themeId`.
`stateMachineConfig`	`StateMachineConfig`	Security configuration for the state machine. See StateMachineConfig.
`workerId`	`string`	Worker instance ID for the `<dotlottie-worker-wc>` variant. Elements sharing a `workerId` reuse one Web Worker.

Examples

Accessing the core instance:

const playerElement = document.querySelector("dotlottie-wc");
playerElement.addEventListener("load", () => {
  const coreInstance = playerElement.dotLottie;
  if (coreInstance) {
    coreInstance.play();
  }
});

Setting layout and renderConfig:

const player = document.querySelector("dotlottie-wc");
player.layout = { fit: "contain", align: [0.5, 0.5] };
player.renderConfig = { devicePixelRatio: 2 };

Setting stateMachineConfig:

const player = document.querySelector("dotlottie-wc");
player.stateMachineConfig = {
  openUrlPolicy: { requireUserInteraction: true, whitelist: ["https://example.com"] },
};

Getting started — render your first animation with <dotlottie-wc>.
Examples — playback control and event handling recipes.
API reference — the worker element, setWasmUrl, and instance access.
JS API reference — the complete core player API.

Attributes and Properties

Attributes

Examples

Properties

Examples

Related