---
title: Integrate Svelte with Storyblok
description: This guide walks you through integrating Storyblok as a headless CMS, fetching content, and building components to render it in your Svelte project.
url: https://www.storyblok.com/docs/quickstarts/svelte
---

# Integrate Svelte with Storyblok

Use Storyblok to manage the content of your Svelte application.

## Quickstart

The fastest way to get started is using Storyblok’s Core Blueprint or CLI wizard:

-   Blueprint (UI)
    
    Use [Storyblok’s Core Blueprint](/docs/concepts/blueprints) to [launch a Svelte project](https://app.storyblok.com/#/spaces/new/blueprint?blueprintReference=starter), complete with a space, GitHub repository, and deployment environment.
    
    Log in to [Storyblok](https://app.storyblok.com/#/me/spaces), select **\+ Add Space** → **Start from Blueprint**, and follow the steps.
    
-   CLI
    
    Use [Storyblok’s CLI](/docs/tooling/cli) to set up a new space and scaffold a Svelte project. In the terminal, run:
    
    ```bash
    storyblok create --template svelte
    ```

## Manual setup

Alternatively, set up the project from scratch and configure your frontend code.

This guide has been tested with the following package versions:

-   `svelte@5.0.0`
-   `@sveltejs/kit@2.16.0`
-   `@storyblok/svelte@5.0.2`
-   `Node.js v22.13.0`

[No Storyblok account?](https://app.storyblok.com/#/signup)Sign up and create a space for free

1.  **Create a [new space](https://app.storyblok.com/#/me/spaces/new?tab=select-plan)**
    
    Log in to [Storyblok](https://app.storyblok.com/#/me/spaces), select **\+ Add Space** → **New Space**, and follow the steps.
    
2.  **Create a Svelte project**
    
    Create a new SvelteKit project following the official [Creating a project guide](https://svelte.dev/docs/kit/creating-a-project).
    
3.  **Install `@storyblok/svelte`**
    
    In the terminal, `cd` into the project, and install the package.
    
    ```bash
    npm install @storyblok/svelte
    ```
    

Next, in the root of your project, create a `.env` file with the access token from your space.

.env

```plaintext
VITE_STORYBLOK_DELIVERY_API_TOKEN=<YOUR-ACCESS-TOKEN>
```

> [!NOTE]
> Learn how to get an [access token](/docs/concepts/access-tokens) for your Storyblok project.

In the root layout, initialize the Storyblok client.

src/routes/+layout.js

```javascript
import { apiPlugin, storyblokInit, useStoryblokApi } from "@storyblok/svelte";

export async function load() {
  storyblokInit({
    accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
    apiOptions: {
      region: "eu", // Choose the correct region from your Space.
    },
    use: [apiPlugin],
  });

  const storyblokAPI = await useStoryblokApi();

  return {
    storyblokAPI,
  };
}
```

## Fetch a single story

Create a `src/routes/[...slug]/+page.js` file and get access the `storyblokAPI` client using the `parent` function.

src/routes/\[...slug\]/+page.js

```javascript
/** @type {import('./$types').PageLoad} */
export async function load({ params, parent }) {
  const { storyblokAPI } = await parent();

  const response = await storyblokAPI.get("cdn/stories/home", {
    version: "draft",
  });

  return {
    story: response.data.story,
  };
}
```

This gives all descendant load functions access to the `storyblokAPI` via the `parent` parameter.

The `+page.js` file passes the story to the corresponding `+page.svelte` file’s `data` prop.

Paste the following code into `src/routes/[...slug]/+page.svelte`.

src/routes/\[...slug\]/+page.svelte

```svelte
<script>
  import { StoryblokComponent } from '@storyblok/svelte';
  export let data
</script>

<StoryblokComponent blok={data.story.content} />
```

`@storyblok/svelte` provides a component to handle your blocks, `StoryblokComponent`.

## Create and register blocks

Create `Page.svelte` component to render all stories of the `page` content type, such as the home story.

src/lib/Page.svelte

```svelte
<script>
 import { StoryblokComponent } from "@storyblok/svelte"

 export let blok;
</script>

{#each blok.body as blok}
 <StoryblokComponent {blok} />
{/each}
```

> [!WARNING]
> Svelte blocks (such as `{#each}`, `{#for}`, and `{#if}`) aren’t related to Storyblok blocks (for example, `feature`, `hero`, and `grid`). Svelte blocks are templating utilities, while Storyblok blocks are content pieces.

Using `StoryblokComponent` iterate through the `body` field and render the blocks in it.

Stories can have a `body` field that contains an array of custom type blocks, such as Feature, Teaser, and Grid.

Create the code for these components as follows.

src/lib/Feature.svelte

```svelte
<script>
  export let blok;
</script>


<div class="feature">
  <span>{blok.name}</span>
</div>
```

src/lib/Teaser.svelte

```svelte
<script>
  export let blok;
</script>

<div class="teaser">
  <h2>{blok.headline}</h2>
</div>
```

src/lib/Grid.svelte

```svelte
<script>
  import { StoryblokComponent } from "@storyblok/svelte";

  export let blok;
</script>

<div class="grid">
{#each blok.columns as nestedBlok}
  <StoryblokComponent blok={nestedBlok} />
{/each}
</div>
```

Similar to `Page.svelte`, `Grid.svelte` iterates over the `columns` block field.

Add all these new components to the layout file.

src/routes/+layout.js

```javascript
import { apiPlugin, storyblokInit, useStoryblokApi } from "@storyblok/svelte";
import Teaser from "$lib/Teaser.svelte"
import Feature from "$lib/Feature.svelte"
import Grid from "$lib/Grid.svelte"
import Page from "$lib/Page.svelte"

export async function load() {
  storyblokInit({
    accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
    apiOptions: {
      region: 'eu', // Choose the correct region from your Space.
    },
    use: [apiPlugin],
    components: {
      teaser: Teaser,
      feature: Feature,
      grid: Grid,
      page: Page,
    }
  });

  const storyblokAPI = await useStoryblokApi();

  return {
    storyblokAPI,
  };
}
```

Run the server and visit the site in your browser.

```bash
npm run dev
```

## Related resources

[Storyblok's Svelte Blueprint Repository](https://github.com/storyblok/blueprint-core-svelte)

[@storyblok/svelte Package Reference](https://www.storyblok.com/docs/libraries/js/svelte-sdk)

[Concept: Blocks](/docs/concepts/blocks)

[Content Delivery API: Retrieve a Single Story](/docs/api/content-delivery/v2/stories/retrieve-a-single-story)

[Svelte Docs](https://svelte.dev/docs)

## Pagination

-   [Previous: Internationalization in Symfony](/docs/quickstarts/symfony/internationalization)
-   [Next: Visual Preview in Svelte](/docs/quickstarts/svelte/visual-preview)