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 to launch a Svelte project, complete with a space, GitHub repository, and deployment environment.

Log in to Storyblok, select + Add Space → Start from Blueprint, and follow the steps.

CLI

Use Storyblok’s CLI to set up a new space and scaffold a Svelte project. In the terminal, run:

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?Sign up and create a space for free

1. Create a new space

   Log in to Storyblok, 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.

3. Install @storyblok/svelte

   In the terminal, cd into the project, and install the package.

   npm install @storyblok/svelte

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

.env

VITE_STORYBLOK_DELIVERY_API_TOKEN=<YOUR-ACCESS-TOKEN>

Note

Learn how to get an access token for your Storyblok project.

In the root layout, initialize the Storyblok client.

src/routes/+layout.js

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

/** @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

<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

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

 export let blok;
</script>

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

Caution

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

<script>
  export let blok;
</script>


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

src/lib/Teaser.svelte

<script>
  export let blok;
</script>

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

src/lib/Grid.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

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.

npm run dev

Related resources

Storyblok's Svelte Blueprint Repository

@storyblok/svelte Package Reference

Concept: Blocks

Content Delivery API: Retrieve a Single Story

Svelte Docs