Getting Started

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:

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:

<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 covers every available option.

Step 3: Run the app

Start your development server:

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

• Drive the player programmatically with advanced playback control

• Look up any prop in the props reference