Josefine Schfr for Storyblok

Posted on Feb 24, 2022 • Updated on Mar 15, 2022 • Originally published at storyblok.com

Announcing @storyblok/svelte

#svelte #sdk #opensource #headlesscms

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.

Usage

Start by installing @storyblok/svelte:

npm install @storyblok/svelte
# yarn add @storyblok/svelte

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";

storyblokInit({
  accessToken: "<your-token>",
  use: [apiPlugin],
  components: {
    teaser: Teaser
  },
});

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:

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

<div use:storyblokEditable={blok}>
  { blok.headline }
</div>

Querying Storyblok API

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

<script>
  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
  });
</script>

<div>
  {#if story}
    <StoryblokComponent blok={story.content} />
  {/if}
</div>

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(story.id, (newStory) => (story = 
    newStory));
});

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.