# Examples
Self-contained recipes for the dotLottie Svelte player - playback controls, event handling, custom styling, and segment playback.

Recipes for common tasks with the `DotLottieSvelte` component. Each snippet is self-contained — copy it into your app and adapt it as needed. For the full list of props, see the [props reference](/en/runtimes/distributions/svelte/v0.x/props-reference).

## Control playback with buttons

To play, pause, and stop an animation from your own UI, get the player instance through the `dotLottieRefCallback` prop and call its playback methods. Listen to player events to keep your local state in sync:

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

  let dotLottie: DotLottie | null = null;
  let isPlaying = false;

  function togglePlayback() {
    if (!dotLottie) return;
    // Check player state directly for reliability
    if (dotLottie.isPlaying) {
      dotLottie.pause();
    } else {
      dotLottie.play();
    }
  }

  function stopPlayback() {
    dotLottie?.stop();
  }

  // Event listeners keep the local isPlaying state in sync
  function handlePlay() {
    isPlaying = true;
  }
  function handlePause() {
    isPlaying = false;
  }
  function handleStop() {
    isPlaying = false;
  }
  function handleComplete() {
    if (!dotLottie?.loop) {
      isPlaying = false;
    }
  }

  function setupListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.addEventListener('play', handlePlay);
    instance.addEventListener('pause', handlePause);
    instance.addEventListener('stop', handleStop);
    instance.addEventListener('complete', handleComplete);
  }

  function removeListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.removeEventListener('play', handlePlay);
    instance.removeEventListener('pause', handlePause);
    instance.removeEventListener('stop', handleStop);
    instance.removeEventListener('complete', handleComplete);
  }

  let currentInstance: DotLottie | null = null;
  function refCallback(ref: DotLottie | null) {
    // Clean up previous listeners if the instance changes
    if (currentInstance) {
      removeListeners(currentInstance);
    }
    dotLottie = ref;
    currentInstance = ref;
    if (currentInstance) {
      setupListeners(currentInstance);
      // Initialize local state from the player after load
      currentInstance.addEventListener('load', () => {
        isPlaying = currentInstance?.isPlaying ?? false;
      })
    }
  }
</script>

<div>
  <DotLottieSvelte
    src="https://lottie.host/your-animation-id.lottie"
    dotLottieRefCallback={refCallback}
    autoplay={false}
    loop={true}
    style="width: 300px; height: 300px; border: 1px solid #eee;"
  />
  <button on:click={togglePlayback}>
    {isPlaying ? "Pause" : "Play"}
  </button>
  <button on:click={stopPlayback}>
    Stop
  </button>
</div>
```

If you need methods beyond `play()`, `pause()`, and `stop()` — such as changing speed or segments at runtime — see [advanced playback control](/en/runtimes/distributions/svelte/v0.x/advanced-usage).

## React to player events

To respond to lifecycle events such as load, play, or errors, attach listeners to the instance received through `dotLottieRefCallback`, and remove them when your component is destroyed:

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

  let dotLottie: DotLottie | null = null;
  let status = 'Idle';

  function handleLoad() {
    console.log("Svelte: Animation loaded");
    status = 'Loaded';
  }

  function handlePlay() {
    console.log("Svelte: Animation playing");
    status = 'Playing';
  }

  function handlePause() {
    console.log("Svelte: Animation paused");
    status = 'Paused';
  }

  function handleStop() {
    console.log("Svelte: Animation stopped");
    status = 'Stopped';
  }

  function handleComplete() {
    console.log("Svelte: Animation completed");
    status = 'Completed';
  }

  function handleError(event) {
    console.error("Svelte: Animation error:", event.error);
    status = `Error: ${event.error?.message || 'Unknown'}`;
  }

  function setupListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.addEventListener('load', handleLoad);
    instance.addEventListener('play', handlePlay);
    instance.addEventListener('pause', handlePause);
    instance.addEventListener('stop', handleStop);
    instance.addEventListener('complete', handleComplete);
    instance.addEventListener('loadError', handleError);
  }

  function removeListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.removeEventListener('load', handleLoad);
    instance.removeEventListener('play', handlePlay);
    instance.removeEventListener('pause', handlePause);
    instance.removeEventListener('stop', handleStop);
    instance.removeEventListener('complete', handleComplete);
    instance.removeEventListener('loadError', handleError);
  }

  onDestroy(() => {
    // Clean up listeners when the component is destroyed
    if (dotLottie) {
      removeListeners(dotLottie);
    }
  });

</script>

<p>Status: {status}</p>
<DotLottieSvelte
  src="https://lottie.host/your-animation-id.lottie"
  autoplay
  loop={false}
  style="width: 300px; height: 300px; border: 1px solid #eee;"
  dotLottieRefCallback={(ref) => {
    dotLottie = ref;
    setupListeners(dotLottie);
  }}
/>
```

The full list of events and their payloads is in the [dotLottie web player events reference](/en/runtimes/distributions/js/v0.x/api/reference#events).

## Style the player

To size or decorate the player, use the standard `style` attribute:

```svelte
<script>
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
</script>

<DotLottieSvelte
  src="animation.lottie"
  style="width: 200px; height: 200px; background-color: lightblue; border-radius: 10px;"
/>
```

## Play a segment

To play only part of an animation, pass a start and end frame to the `segment` prop:

```svelte
<script>
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
</script>

<DotLottieSvelte
  src="animation.lottie"
  autoplay
  loop
  segment={[10, 50]} /* Play frames 10 to 50 */
  style="width: 300px; height: 300px; border: 1px solid #eee;"
/>
```

To change segments at runtime, call `setSegment()` on the player instance as shown in [advanced playback control](/en/runtimes/distributions/svelte/v0.x/advanced-usage).

## Related

- [Getting started](/en/runtimes/distributions/svelte/v0.x) — install the player and render a first animation
- [Props reference](/en/runtimes/distributions/svelte/v0.x/props-reference) — all component props with types and defaults
- [Advanced playback control](/en/runtimes/distributions/svelte/v0.x/advanced-usage) — drive the player through the `DotLottie` instance