# API Reference
API reference for the dotLottie Svelte player covering package exports, WASM configuration, and player instance access.

The `@lottiefiles/dotlottie-svelte` package wraps the core [dotLottie web player](/en/runtimes/distributions/js/v0.x/api/reference).

## Exports

| Export            | Kind             | Description                                                                                                                 |
| ----------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `DotLottieSvelte` | Svelte component | Renders a `.lottie` or `.json` animation. See the [props reference](/en/runtimes/distributions/svelte/v0.x/props-reference) |
| `setWasmUrl`      | Function         | Sets a custom URL for the WASM renderer binary                                                                              |
| `DotLottie`       | Type             | Type of the core player instance passed to `dotLottieRefCallback`                                                           |

## setWasmUrl

```typescript
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.

```typescript
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:

```svelte
<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](/en/runtimes/distributions/js/v0.x/api/reference#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](/en/runtimes/distributions/js/v0.x/api/reference#methods).
- **Events** — `ready`, `load`, `loadError`, `play`, `pause`, `stop`, `loop`, `complete`, `frame`, `render`, `freeze`, `unfreeze`, `destroy`, `renderError`, plus all state machine events. See [Events](/en/runtimes/distributions/js/v0.x/api/reference#events).
- **Types** — `Layout`, `RenderConfig`, `StateMachineConfig`, `Transform`, `Marker`, slot value types, and event payload interfaces. See [Type Definitions](/en/runtimes/distributions/js/v0.x/api/reference#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](/en/runtimes/distributions/svelte/v0.x/props-reference) — component props
- [Examples](/en/runtimes/distributions/svelte/v0.x/examples) — usage recipes
- [dotLottie web player API reference](/en/runtimes/distributions/js/v0.x/api/reference) — full core player API