Announcing Stable Live Preview for Storyblok’s Astro SDK

We are absolutely thrilled to announce that starting with version 6.0.0, our Astro SDK, @storyblok/astro , now includes a stable live preview feature!

With this major release, we’ve introduced some breaking changes as well. Let’s take a look at what’s new and how you can update your code to work seamlessly with the latest release.

Module import changes

In this release, we’ve removed the default export in favor of a named export. This change primarily affects your astro.config.mjs file, so make sure to update it as shown below:

        
      import { storyblok } from '@storyblok/astro';

export default {
  integrations: [
    storyblok({
      accessToken: 'OsvN....',
      bridge: {
        resolveRelations: ['featured-articles.posts'],
      },
      enableFallbackComponent: true,
      livePreview: true,
    }),
  ],
};
    

Removal of useStoryblok

In our experimental release, useStoryblok required extensive configuration, even if you didn’t use all live preview features, to maintain consistency with our other SDKs. Additionally, we used AST code parsing, which made the implementation more complex.

In this version, useStoryblok has been completely removed and replaced with a new function: getLiveStory. Here’s how you can use it:

        
      ---
import { getLiveStory, useStoryblokApi } from '@storyblok/astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import BaseLayout from '../layouts/Layout.astro';

const { slug } = Astro.params;
let story = null;

const liveStory = await getLiveStory(Astro);
if (liveStory) {
  story = liveStory;
} else {
  const sbApi = useStoryblokApi();
  const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
    version: 'draft',
    resolve_relations: ['featured-articles.posts'],
  });
  story = data?.story;
}
---

<BaseLayout>
     <StoryblokComponent blok={story.content} />
</BaseLayout>
    

If you’re using resolve_relations, pass it directly in the bridge configuration in astro.config.mjs. Refer to the first code example above for details.

Listening for live preview updates

When the live preview updates content in the Storyblok editor, a custom event (storyblok-live-preview-updated) is triggered. You can listen for this event in your application like this:

        
      <script>
  document.addEventListener("storyblok-live-preview-updated", () => {
    console.log("Live preview: body updated");
  });
</script>
    

This is particularly useful if you need to regenerate CSS or handle other custom tasks when the content updates.

Next steps

We’re excited for you to try out this stable live preview feature! We would absolutely love to see your projects built with Storyblok and Astro, and hear your feedback.

Would you like to contribute to the development of @storyblok/astro ? Feel free to create an issue or submit a PR in the official GitHub repository .