Skip to content
Storyblok Documentation Docs

Visual Preview in Astro

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

Set the default environment

Section titled “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 vite-plugin-mkcert package.

Terminal window
npm install vite-plugin-mkcert --save-dev

Add the plugin to your Astro config file.

astro.config.mjs
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

Section titled “Bridge with the Visual Editor”

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

src/storyblok/Feature.astro
---
const { blok } = Astro.props
---


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

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

Deploy the preview environment

Section titled “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.

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn