API Reference

The @lottiefiles/dotlottie-svelte package wraps the core dotLottie web player.

Exports

setWasmUrl

setWasmUrl(url: string): void

Sets a custom URL for the WASM renderer binary. Must be called before any animation is rendered — for example, in the app's root +layout.svelte or entry point.

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

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

Player instance

The dotLottieRefCallback prop receives the underlying DotLottie instance once instantiated, or null when the instance is not available:

<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}
/>

The instance exposes the full core player API:

• 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.

Lifecycle

The component calls destroy() on the core player instance automatically when it is destroyed. No manual cleanup of the instance is required.

Related

• Props reference — component props

• Examples — usage recipes

• dotLottie web player API reference — full core player API