Storyblok is the first headless CMS that works for developers & marketers alike.
We are very excited to announce the release of @storyblok/astro! Using Storyblok in your Astro project is now much easier and faster than before. Thanks to the powerful Astro Integration API and our new module, you can get up and running in a matter of minutes.
Let's explore how it works!
First of all, install
Add the following code to your
astro.config.mjs and replace the
accessToken with the preview API token of your Storyblok space.
As you can see, all components that you defined in Storyblok have to be globally registered through the
components object. Henceforth, they’ll be loaded automatically when using
StoryblokComponent as shown below.
Querying the Storyblok API
In any of your Astro pages, you can now use the
useStoryblokApi function to fetch data from Storyblok. In this example, we're retrieving the
Creating Astro Components
For each Astro component that should be linked to its equivalent in your Storyblok Space, you can use the
storyblokEditable() function on its root element, passing the
blok property that they receive and enabling communication with the Storyblok Bridge. Furthermore, you can use the
StoryblokComponent to dynamically load any of the components that you registered globally.
...but what about partial hydration?
We've got you covered! Being able to bring your favorite framework and benefitting from partial hydration is a huge advantage of using Astro.
If you want to use partial hydration with any of the frameworks supported by Astro, follow these steps:
- Install the official Astro integration for your desired framework
- Create an Astro component that serves as a wrapper and utilizes the most suitable client directive
- Create the actual component in Vue, Svelte, React or any other supported framework
For working examples, you can explore the Live Demo on Stackblitz.
Enabling the Storyblok Bridge
The Storyblok Bridge is automatically activated by default. If you would like to disable it or enable it conditionally (e.g. depending on the environment) you can set the
bridge parameter to
And that’s it! Your Astro project is now fully integrated with the Storyblok CMS.
Have a look at @storyblok/astro for more detailed documentation.
Are you excited to try it out? We would love to see your projects built with Storyblok and Astro!
We are planning to release a complete Storyblok Astro Ultimate Tutorial in which you will learn how to build a feature-rich, multilingual website.
Would you like to contribute to the development of @storyblok/astro? Feel free to create an issue or a PR in the official GitHub repository.
|@storyblok/astro GitHub repository||https://github.com/storyblok/storyblok-astro|
|@storyblok/astro NPM package||https://npmjs.com/package/@storyblok/astro|
|Storyblok Learning Hub||https://storyblok.com/docs|
|DEV.to announcement blog post||https://dev.to/storyblok/announcing-storyblokastro-44po|