dotLottie Svelte Player API Reference

The DotLottieSvelte component wraps the core dotLottie web player. After obtaining the player instance via dotLottieRefCallback, you have access to the full core API — properties, methods, and events documented in the JS API Reference.

setWasmUrl

Configure a custom URL for the WASM renderer binary. Call this before rendering any animations — for example, in your app's root +layout.svelte or entry point.

import { setWasmUrl } from '@lottiefiles/dotlottie-svelte';

setWasmUrl('https://your-cdn.com/dotlottie-player.wasm');

Accessing the Player Instance

Use dotLottieRefCallback to get the underlying DotLottie instance:

<script lang="ts">
  import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
  import type { DotLottie } from '@lottiefiles/dotlottie-svelte';

  let dotLottie: DotLottie | null = null;

  function handleRef(instance: DotLottie | null) {
    dotLottie = instance;
    if (dotLottie) {
      dotLottie.addEventListener('load', () => {
        console.log('Total frames:', dotLottie?.totalFrames);
        console.log('Duration:', dotLottie?.duration);
      });
    }
  }
</script>

<DotLottieSvelte
  src="animation.lottie"
  autoplay
  loop
  dotLottieRefCallback={handleRef}
/>

Once you have the instance, you can use all properties, methods, and events from the core player:

• Properties — currentFrame, duration, totalFrames, isPlaying, isPaused, isStopped, isLoaded, loop, speed, mode, segment, manifest, activeAnimationId, activeThemeId, and more. See Properties.

• Methods — play(), pause(), stop(), setFrame(), setSpeed(), setLoop(), setMode(), setSegment(), setMarker(), freeze(), unfreeze(), tween(), load(), loadAnimation(), setTheme(), setLayout(), slot methods, state machine methods, and more. See Methods.

• Events — ready, load, loadError, play, pause, stop, loop, complete, frame, render, freeze, unfreeze, destroy, renderError, plus all state machine events. See Events.

• Types — Layout, RenderConfig, StateMachineConfig, Transform, Marker, slot value types, and event payload interfaces. See Type Definitions.

Related Topics

• Props Reference — Component props

• Examples — Usage examples

• JS API Reference — Full core player API