# Getting Started
Install @lottiefiles/dotlottie-svelte and render your first Lottie animation in a Svelte or SvelteKit application.

In this tutorial, we install the dotLottie Svelte player and render a looping Lottie animation in a Svelte application.

## Prerequisites

- A working Svelte or SvelteKit project
- Node.js and npm installed

## Step 1: Install the package

Add `@lottiefiles/dotlottie-svelte` to your project:

<PackageInstall pkg="@lottiefiles/dotlottie-svelte" />

When the install finishes, the package appears in the `dependencies` section of your `package.json`.

## Step 2: Render an animation

Open a component in your project — for example `src/routes/+page.svelte` — and replace its contents with the following. Keep the sample `src` URL for now, or swap in the URL of your own `.lottie` or `.json` file:

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

<main>
  <h1>Svelte Animation</h1>

  <DotLottieSvelte
    src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
    autoplay
    loop
    style="width: 300px; height: 300px; border: 1px solid #eee;"
  />
</main>

<style>
  main {
    text-align: center;
    padding: 1em;
  }
  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 100;
  }
</style>
```

We import the `DotLottieSvelte` component and give it four props: `src` points to the animation file, `autoplay` starts playback as soon as the animation loads, `loop` repeats it indefinitely, and `style` sizes the player. The [props reference](/en/runtimes/distributions/svelte/v0.x/props-reference) covers every available option.

## Step 3: Run the app

Start your development server:

```bash
npm run dev
```

Open the app in your browser. You should now see the animation playing in a 300 × 300 pixel box below the heading, restarting each time it completes.

Notice that we never wrote any cleanup code. The component calls `destroy()` on the underlying player automatically when it unmounts, so there are no memory leaks to manage.

## What you accomplished

You installed the dotLottie Svelte player and rendered a looping Lottie animation with a single component — everything else was handled for you.

## Next steps

- Try common tasks like playback buttons and event handling in the [examples](/en/runtimes/distributions/svelte/v0.x/examples)
- Drive the player programmatically with [advanced playback control](/en/runtimes/distributions/svelte/v0.x/advanced-usage)
- Look up any prop in the [props reference](/en/runtimes/distributions/svelte/v0.x/props-reference)