Announcing @storyblok/svelte
Tags: svelte, sdk, opensource, headlesscms
Published: 2022-02-24 08:51:21

We are absolutely thrilled to announce the release of [@storyblok/svelte](https://github.com/storyblok/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](https://twitter.com/arisa_dev), [Facundo](https://twitter.com/facundozurdo) & [Alex](https://twitter.com/alexjoverm) for their dedication to this project & their support)

🤫 Psst! You can jump directly to the [LIVE DEMO](https://stackblitz.com/edit/svelte-sdk-demo?file=src/App.svelte&terminal=dev) in Stackblitz if you’re in a hurry.

## Usage

Start by installing `@storyblok/svelte`:


```bash
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](https://www.storyblok.com/docs/api/content-delivery/v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte) of your Storyblok space:

```js
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: 

```html
<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](https://www.storyblok.com/docs/api/content-delivery/v2):

```html
<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:

```js
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](https://github.com/storyblok/storyblok-svelte) for more details.

### Next Steps

Excited to try it out? Remember you can play right now with the [Live Demo](https://stackblitz.com/edit/svelte-sdk-demo?file=src/App.svelte&terminal=dev) 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](https://github.com/storyblok/storyblok-svelte) or get in touch.