Visual Preview in Astro

Enhance your editorial and development experience by connecting your local project with Storyblok’s visual editor.

Set the default environment

Go to Settings > Visual Editor and set the default environment to the URL of the local development server. Astro’s default is localhost:4321, for example.

For Astro, install the @vitejs/vite-plugin-mkcert package.

npm install @vitejs/vite-plugin-mkcert --save-dev

Add the plugin to your Astro config file.

import { defineConfig } from "astro/config";
import { storyblok } from "@storyblok/astro";
import { loadEnv } from "vite";
const env = loadEnv("", process.cwd(), "STORYBLOK");const { STORYBLOK_DELIVERY_API_TOKEN} = loadEnv(import.meta.env.MODE, process.cwd(), "");
 import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: env.STORYBLOK_DELIVERY_API_TOKEN,
      apiOptions: {
        region: "eu", // Choose the correct region from your Space.
      },
    }),
  ],
  output: 'server',
 vite: {
		plugins: [ mkcert() ]
	},
});

Restart the dev server if necessary.

To render the home story correctly in the Visual Editor, go to the Config section and write / into the Real path field.

You may have to open the URL in a separate browser tab and accept the certificate first.

Bridge with the Visual Editor

Connect Astro components with their Storyblok counterparts via the storyblokEditable module.

---
const { blok } = Astro.props
---

 <p class="feature" {...storyblokEditable(blok)}>
 <p class="feature">
  <span>{blok.name}</span>
</p>

Now, click on a component and see its corresponding block open up in the editor.

Deploy the preview environment

Make sure to fetch the draft version of the content and use a preview access token. Deploy in client-side or server-side rendering mode to reflect content updates dynamically upon saving content.

For the production environment, fetch the published version of the content and use a public access token.