Config

The DotLottie constructor accepts a config object with the following properties:

Config Options

Property	Type	Default	Description
`canvas`	`HTMLCanvasElement \| OffscreenCanvas`	required	Canvas element for rendering
`src`	`string`	`undefined`	URL to load animation from
`data`	`string \| ArrayBuffer \| object`	`undefined`	Animation data (JSON string, ArrayBuffer for .lottie, or object)
`autoplay`	`boolean`	`false`	Auto-start animation on load
`loop`	`boolean`	`false`	Loop the animation
`loopCount`	`number`	`0`	Number of loops (0 for infinite)
`speed`	`number`	`1`	Animation playback speed
`mode`	`'forward' \| 'reverse' \| 'bounce' \| 'reverse-bounce'`	`'forward'`	Playback mode
`useFrameInterpolation`	`boolean`	`true`	Enable frame interpolation for smooth playback
`segment`	`[number, number]`	`undefined`	Frame segment to play [startFrame, endFrame]
`backgroundColor`	`string`	`undefined`	Canvas background color (hex, rgb, etc.)
`renderConfig`	`RenderConfig`	`{}`	Rendering configuration options
`layout`	`Layout`	`undefined`	Animation layout and fitting options
`marker`	`string`	`undefined`	Named marker to play from
`animationId`	`string`	`undefined`	Animation ID (for .lottie files with multiple animations)
`themeId`	`string`	`undefined`	Theme ID to apply
`stateMachineId`	`string`	`undefined`	State machine ID to load
`stateMachineConfig`	`StateMachineConfig`	`undefined`	State machine configuration

RenderConfig

Property	Type	Default	Description
`autoResize`	`boolean`	`true`	Auto-resize canvas to match container
`devicePixelRatio`	`number`	`window.devicePixelRatio`	Device pixel ratio for high-DPI displays
`freezeOnOffscreen`	`boolean`	`true`	Pause rendering when canvas is offscreen

Layout

Property	Type	Default	Description
`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'fit-width' \| 'fit-height'`	`'contain'`	How to fit animation in canvas
`align`	`[number, number]`	`[0.5, 0.5]`	Alignment within canvas [x, y] from 0 to 1

StateMachineConfig

Property	Type	Description
`openUrlPolicy`	`object`	URL opening policy configuration
`openUrlPolicy.requireUserInteraction`	`boolean`	Require user interaction before opening URLs
`openUrlPolicy.whitelist`	`string[]`	Allowed URL patterns

Example Configuration

const dotLottie = new DotLottie({
  canvas: document.querySelector('#canvas'),
  autoplay: true,
  loop: true,
  speed: 1.5,
  src: 'animation.lottie',
  backgroundColor: '#ff0000',
  segment: [10, 50],
  renderConfig: {
    autoResize: true,
    devicePixelRatio: 2
  },
  layout: {
    fit: 'contain',
    align: [0.5, 0.5]
  },
  stateMachineConfig: {
    openUrlPolicy: {
      requireUserInteraction: true,
      whitelist: ['https://trusted-domain.com']
    }
  }
});