Add Advanced Preview Mode for Storyblok Live Preview Bridge Support in Astro

[Cartman720]

Summary

We would love to have a capability to support Storyblok Live Editing with Storyblok Bridge. Astro already supports hybrid rendering which allows integration with Storyblok, but it lacks support for Storyblok's live editing feature. This feature enables editors to see changes instantly on screen without needing to click the Save button for updates.

Background & Motivation

I am an Engineering Manager and Tech Lead at Bejamas, working with a large Fortune 500 customer who is very interested in using Astro for their website. However, they are also eager to use Storyblok Live Preview with instant editing (Bridge).

Introducing a more sophisticated "Preview" mode, beyond the current hybrid rendering from the official Storyblok tutorial, would be a killer feature for Astro.

The current limitation stems from Astro's Islands architecture, which lacks a client-side shared state beyond Nanostores or global browser objects via script tags. The main obstacle here is that, Astro cannot be rendered within React or share data between where we can call the useStoryblok hook. This limitation prevents editors from fully utilizing Storyblok's live editing feature.

By introducing a "Preview" mode that allows Astro components to be rendered within React or other frameworks and "temporarily become reactive", we can significantly enhance the integration with Storyblok, enabling the use of the Storyblok Bridge. This enhancement will also facilitate live editing capabilities in other CMS platforms, such as Contentful.

Goals

• Enable Storyblok live editing feature: Allow editors to see their changes instantly without needing to click the Save button.
• Introduce a "Preview" mode: Allow Astro components to be reactive within React only in "Preview" mode or other mechanisms to support shared state so props can be reactively updated from parent component.
• Maintain production integrity: Ensure that in production mode, Astro components can be rendered as they currently do, without compromising performance or functionality, fully aligning with Islands Architecture.
• Provide flexibility in component rendering: Allow opting out of certain Astro components which prevent being recative, such as the image component, in preview mode while retaining their full functionality in production mode.

Example

In the below example we are using static rendering within main Astro route [...slug].astro.

However we can't use useStoryblok simply becuase it's not a client side component.

---
import { getStoryblokLinks, getStoryblokStories } from '@/services/storyblok';
import Layout from '@/components/layouts/Layout.astro';
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";

export const getStaticPaths = async () => {
  const storyblokLinks = await getStoryblokLinks();

  const slugs = Object.values(storyblokLinks.data.links).map(item => item?.real_path)
  const formattedSlugs = slugs.map(slug => ({ params: { slug } }));

  return formattedSlugs;
};

const slug = Astro.url.pathname;
const story = await getStoryblokStories(slug, { version: 'draft' });
---

<Layout>
	<main>
    {
      story.data?.stories?.[0]?.content?.body?.map((blok) => {
        return <StoryblokComponent blok={blok} />
      })
    }
	</main>
</Layout>

While if we allow to render our Astro componetns within React wrapper component with capability to run client hooks in "Preview" it will let us using Storyblok Bridge

function StoryblokBridge({ initialStory }) {
  const story = useStoryblok(initialStory, { version: "draft" });

  return (
    <Layout>
      <main>
        {story.data?.stories?.[0]?.content?.body?.map((blok) => {
          return <StoryblokComponent blok={blok} />;
        })}
      </main>
    </Layout>
  );
}

in astro.config.mjs we can have something similar

const env = loadEnv("", process.cwd(), "");
const isPreview = process.env.PUBLIC_ENV === 'preview';

export default defineConfig({
  output: isPreview? 'server' : 'static',
  adapter: isPreview ? vercel() : 
  enablePreviewMode: isPreview,
});

I believe adding support for more sophisticated "Preview" mode would greatly benefit Astro users. This enhancement would allow instant editing, fully utilizing modern most of CMS tools. We would love to contribute to this feature and get feedback on its feasibility.

[alvarosabu]

Hi @Cartman720 I have great news for you, the team is already working on it =P storyblok/storyblok-astro#828

[dipankarmaikap]

@Cartman720 Storyblok has launched the Astro Live Preview support. You can read more about the details here: Announcing Live Preview for Storyblok Astro. Please try it out and share your feedback with us.

[edvinasjurele]

Live Preview feature is now stable starting storyblok/astro v6 https://www.storyblok.com/mp/announcing-stable-live-preview-for-storybloks-astro-sdk

[Cartman720]

Awesome job! Let me give you a shoutout on social media! 😃