DEV Community

Cover image for Announcing @storyblok/svelte
Josefine Schfr for Storyblok

Posted on • Updated on • Originally published at

Announcing @storyblok/svelte

We are absolutely thrilled to announce the release of @storyblok/svelte! From now on, you can integrate Storyblok with your Svelte project through 3 simple steps. No need to make framework-specific adjustments after using the @storyblok/js library - even faster, easier and - did we say faster? - than before.

All joking aside, we spend a good amount of time trying to make @storyblok/svelte as ‘svelte’ as possible, tested it thoroughly and even improved overall DX for our SDKs in general.

Let’s dig in and explore how it works 🎉
(massive shout out to Arisa, Facundo & Alex for their dedication to this project & their support)

🤫 Psst! You can jump directly to the LIVE DEMO in Stackblitz if you’re in a hurry.


Start by installing @storyblok/svelte:

npm install @storyblok/svelte
# yarn add @storyblok/svelte
Enter fullscreen mode Exit fullscreen mode

Initialize the library in your application (usually in main.js) by adding the apiPlugin and the access token of your Storyblok space:

import { storyblokInit, apiPlugin } from "@storyblok/svelte";
import Teaser from "./components/Teaser.svelte";

  accessToken: "<your-token>",
  use: [apiPlugin],
  components: {
    teaser: Teaser
Enter fullscreen mode Exit fullscreen mode

As you see, you should pass all the components you defined in Storyblok (and implemented in Svelte) to the components object in the storyblokInit function. They’ll be loaded automatically by using the StoryblokComponent as you’ll see below.

Now, you have to just add the use:storyblokEditable={blok} action to the root of each component that you are loading in your storyblokInit. For example, in Teaser.svelte:

  import { storyblokEditable } from "@storyblok/svelte";
  export let blok;

<div use:storyblokEditable={blok}>
  { blok.headline }
Enter fullscreen mode Exit fullscreen mode

Querying Storyblok API

In your component page, use the useStoryblokApi() to get your stories from the Storyblok CDN API:

  import { onMount } from "svelte";
  import { useStoryblokApi } from "@storyblok/svelte";

  let story = null;
  onMount(async () => {
    const storyblokApi = useStoryblokApi();
    const { data } = await 
    storyblokApi.get("cdn/stories/home", {
      version: "draft",
    story = data.story

  {#if story}
    <StoryblokComponent blok={story.content} />
Enter fullscreen mode Exit fullscreen mode

As you see in the example, you can use the StoryblokComponent to load, according to the blok , any of the components you defined above in the storyblokInit function.

Listening for changes of Storyblok Visual Editor 🚀

You can use a useStoryblokBridge function we provide for you:

import { useStoryblokBridge } from "@storyblok/svelte";    

onMount(() => {
  useStoryblokBridge(, (newStory) => (story = 
Enter fullscreen mode Exit fullscreen mode

And that’s it: your Svelte App is now connected to Storyblok with the real-time editing experience fully enabled 🚀

Feel free to check out @storyblok/svelte docs for more details.

Next Steps

Excited to try it out? Remember you can play right now with the Live Demo on Stackblitz. On top of that, expect soon a full tutorial on Svelte and Svelte Kit (with live demos, of course).

Oh, a secret 🤫 You might find us in conferences talking about it - stay tuned! 😉

Want to contribute? We’d love that! Feel free to create an issue or PR on the svelte repo or get in touch.

Top comments (2)

siddharthdayalwal profile image
Siddharth Dayalwal

Great work here, love the SDK! 🔥

samuelsnopko profile image
Samuel Snopko

Very nice and straight to the point article! Thank you for the awesome work @josefine 👏