Announcing @storyblok/astro
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!
In a hurry? Head over to the Live Demo on StackBlitz!
Storyblok/astro Usage
First of all, install @storyblok/astro
:
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 home
Story:
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 false
in astro.config.mjs
.
Since Astro is not a reactive JavaScript framework and renders everything as HTML, the Storyblok Bridge will not provide real-time editing as you may know it from other frameworks. However, it automatically refreshes the site for you whenever you save or publish a story.
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.
Next Steps
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.
Resource | Link |
---|---|
@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 |