Announcing @storyblok/svelte
Storyblok is the first headless CMS that works for developers & marketers alike.
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
Initialize the library in your application (usually in main.js
) by adding the apiPlugin
and the access token of your Storyblok space:
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:
Querying Storyblok API
In your component page, use the useStoryblokApi()
to get your stories from the Storyblok CDN API:
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 the useStoryblokBridge
function we provide for you:
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.
Resource | Link |
---|---|
@storyblok/svelte docs | https://www.npmjs.com/package/@storyblok/svelte |
Storyblok Learning Hub | https://www.storyblok.com/docs |
DEV.to announcement blog post | https://dev.to/storyblok/announcing-storybloksvelte-de1 |