# Props Reference
Complete reference for DotLottieSvelte component props with types and defaults, plus events emitted by the player instance.

The `DotLottieSvelte` component accepts the following props.

## Props

| Prop                    | Type                                                     | Required | Default     | Description                                                                                                                                                                                                                                                                              |
| ----------------------- | -------------------------------------------------------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src`                   | `string`                                                 | ✔️       | `undefined` | Source URL or path to the `.lottie` or `.json` file                                                                                                                                                                                                                                      |
| `data`                  | `string \| ArrayBuffer`                                  |          | `undefined` | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for `.lottie` animations                                                                                                                                                                                     |
| `autoplay`              | `boolean`                                                |          | `false`     | Whether the animation plays automatically when loaded                                                                                                                                                                                                                                    |
| `loop`                  | `boolean`                                                |          | `false`     | Whether the animation loops                                                                                                                                                                                                                                                              |
| `loopCount`             | `number`                                                 |          | `0`         | Number of times the animation loops before stopping. `0` loops infinitely when `loop` is `true`                                                                                                                                                                                          |
| `speed`                 | `number`                                                 |          | `1`         | Playback speed of the animation                                                                                                                                                                                                                                                          |
| `mode`                  | `"forward" \| "reverse" \| "bounce" \| "reverse-bounce"` |          | `"forward"` | Animation play mode                                                                                                                                                                                                                                                                      |
| `segment`               | `[number, number]`                                       |          | `undefined` | Animation segment. An array of two numbers: start frame and end frame                                                                                                                                                                                                                    |
| `marker`                | `string`                                                 |          | `undefined` | Named lottie marker to play                                                                                                                                                                                                                                                              |
| `animationId`           | `string`                                                 |          | `undefined` | ID of the animation to load from a multi-animation `.lottie` file                                                                                                                                                                                                                        |
| `themeId`               | `string`                                                 |          | `undefined` | ID of the dotLottie theme to initially use                                                                                                                                                                                                                                               |
| `themeData`             | `string`                                                 |          | `undefined` | Raw theme JSON string to apply directly, as an alternative to `themeId`                                                                                                                                                                                                                  |
| `backgroundColor`       | `string`                                                 |          | `undefined` | Background color of the animation container. Accepts a 6-digit or 8-digit hex color string (e.g., `"#000000"`, `"#000000FF"`)                                                                                                                                                            |
| `layout`                | `object`                                                 |          | `undefined` | Layout configuration with `fit` and `align` properties. See [Layout configuration](/en/runtimes/distributions/js/v0.x/api/reference#layout-configuration)                                                                                                                                |
| `renderConfig`          | `object`                                                 |          | `undefined` | Configuration for rendering the animation. See [Render configuration](/en/runtimes/distributions/js/v0.x/api/reference#render-configuration)                                                                                                                                             |
| `useFrameInterpolation` | `boolean`                                                |          | `true`      | Whether the animation updates on subframes. When `false`, the original After Effects frame rate is maintained, which can improve performance when subframe accuracy is not critical. When `true`, the animation refreshes on each `requestAnimationFrame`, including intermediate values |
| `stateMachineId`        | `string`                                                 |          | `undefined` | ID of the state machine to load on animation load                                                                                                                                                                                                                                        |
| `stateMachineConfig`    | `object`                                                 |          | `undefined` | Security configuration for the state machine. See [StateMachineConfig](/en/runtimes/distributions/js/v0.x/api/reference#statemachineconfig)                                                                                                                                              |
| `playOnHover`           | `boolean`                                                |          | `false`     | Plays the animation when the cursor hovers over it and pauses when it leaves                                                                                                                                                                                                             |
| `style`                 | `string`                                                 |          | `undefined` | Standard HTML style attribute applied to the player container                                                                                                                                                                                                                            |
| `dotLottieRefCallback`  | `(dotLottie: DotLottie \| null) => void`                 |          | `undefined` | Callback that receives a reference to the underlying [`DotLottie`](/en/runtimes/distributions/js/v0.x/api/reference) player instance once instantiated                                                                                                                                   |

### Example

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

  let dotLottie: DotLottie | null = null;
</script>

<DotLottieSvelte
  src="https://example.com/animation.lottie"
  autoplay
  loop
  speed={2}
  mode="bounce"
  segment={[10, 20]}
  backgroundColor="#f0f0f0"
  style="width: 300px; height: 300px;"
  dotLottieRefCallback={(ref) => dotLottie = ref}
/>
```

## Events

The component does not emit Svelte events. Events are emitted by the underlying `DotLottie` instance, obtained through `dotLottieRefCallback` and subscribed to with `addEventListener(event, listener)`.

| Event         | Description                  |
| ------------- | ---------------------------- |
| `ready`       | WASM renderer is initialized |
| `load`        | Animation is loaded          |
| `loadError`   | Error loading animation      |
| `play`        | Animation starts playing     |
| `pause`       | Animation is paused          |
| `stop`        | Animation is stopped         |
| `loop`        | Animation completes a loop   |
| `complete`    | Animation completes          |
| `frame`       | Animation reaches new frame  |
| `render`      | New frame is rendered        |
| `freeze`      | Animation is frozen          |
| `unfreeze`    | Animation is unfrozen        |
| `destroy`     | Animation is destroyed       |
| `renderError` | Rendering error occurred     |

Event payloads and state machine events are documented in the [dotLottie web player events reference](/en/runtimes/distributions/js/v0.x/api/reference#events).

## Related

- [Examples](/en/runtimes/distributions/svelte/v0.x/examples) — recipes that use these props
- [Advanced playback control](/en/runtimes/distributions/svelte/v0.x/advanced-usage) — runtime control through the instance
- [API reference](/en/runtimes/distributions/svelte/v0.x/api-reference) — package exports and instance access