dotLottie Web Components Player Attributes/Properties Reference

This document provides a reference for the attributes and properties available in the dotLottie Web Component (<dotlottie-player>).

Attributes

src*: string

(Required) The source URL or path to the .lottie or .json file.

<dotlottie-player src="https://example.com/animation.lottie"></dotlottie-player>

autoplay: boolean

(Default: false)

Whether the animation should play automatically when loaded. Add the attribute without a value for true.

<dotlottie-player src="animation.lottie" autoplay></dotlottie-player>

loop: boolean

(Default: false)

Whether the animation should loop. Add the attribute without a value for true.

<dotlottie-player src="animation.lottie" loop></dotlottie-player>

speed: number

(Default: 1)

The playback speed of the animation.

<dotlottie-player src="animation.lottie" speed="2"></dotlottie-player>

data: string | ArrayBuffer

Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. (Note: Setting ArrayBuffer data typically requires using the JavaScript property, not the attribute).

segment: string (representing [number, number])

Animation segment as a stringified array of two numbers (start frame and end frame).

<dotlottie-player src="animation.lottie" segment="[10, 50]"></dotlottie-player>

mode: "forward" | "reverse" | "bounce" | "reverse-bounce"

(Default: "forward")

Animation play mode.

<dotlottie-player src="animation.lottie" mode="bounce"></dotlottie-player>

backgroundColor: string

Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000FF").

<dotlottie-player src="animation.lottie" backgroundColor="#f0f0f0ff"></dotlottie-player>

themeId: string

The ID of the dotLottie theme to initially use.

<dotlottie-player src="themed.lottie" themeId="dark-mode"></dotlottie-player>

animationId: string

ID of the animation to load from a multi-animation .lottie file.

<dotlottie-player src="multi.lottie" animationId="scene-2"></dotlottie-player>

marker: string

Named lottie marker to play.

<dotlottie-player src="animation.lottie" marker="intro"></dotlottie-player>

useFrameInterpolation: boolean

(Default: true)

Determines if the animation should update on subframes. Set to false for discrete frame-by-frame playback.

<dotlottie-player src="animation.lottie" useFrameInterpolation="false"></dotlottie-player>

loopCount: number

(Default: 0)

Number of times the animation loops before stopping. A value of 0 loops infinitely when loop is present.

<dotlottie-wc src="animation.lottie" loop loopCount="3"></dotlottie-wc>

stateMachineId: string

ID of the state machine to load on animation load.

<dotlottie-player src="interactive.lottie" stateMachineId="myFSM"></dotlottie-player>

Properties (Accessible via JavaScript)

These are typically set via JavaScript on the element instance, not as HTML attributes.

renderConfig: object

Configuration for rendering the animation. Refer to the dotLottie-web RenderConfig documentation for details.

<dotlottie-player id="my-player" src="animation.lottie"></dotlottie-player>
<script>
  const player = document.getElementById("my-player");
  // Wait for player load if setting config early
  player.addEventListener("load", () => {
    player.renderConfig = { devicePixelRatio: 2 };
  });
  // Or set directly if player is already loaded
  // if (player.dotLottie) {
  //   player.renderConfig = { devicePixelRatio: 2 };
  // }
</script>

layout: object

Layout configuration with fit and align properties. Must be set via JavaScript. See Layout Configuration.

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

themeData: string

Raw theme JSON string to apply directly, as an alternative to themeId. Must be set via JavaScript.

stateMachineConfig: object

Security configuration for the state machine. Must be set via JavaScript. See StateMachineConfig.

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

workerId: string

Worker instance ID for the DotLottieWorkerWC variant. Allows sharing a Web Worker across multiple player instances.

dotLottie: DotLottie (Read-only)

The underlying core DotLottie instance, allowing access to all its methods and event listeners for programmatic control. Available after the component's 'load' event fires.

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

Next Steps

• Learn about Basic Usage

• Check out Examples