Skip to content
Storyblok Documentation Docs

Visual Preview in React

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

Connect your local environment

Section titled “Connect your local environment”

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

For vite, install the vite-plugin-mkcert package.

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

Add the plugin to your vite config file.

vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mkcert from 'vite-plugin-mkcert';


export default defineConfig({
  plugins: [
    react(),
    mkcert(),
  ],
});

Restart your development server if necessary, your project should be visible in the preview area.

Set up Storyblok’s Bridge

Section titled “Set up Storyblok’s Bridge”

Connect React components to their Storyblok counterparts using the storyblokEditable function.

src/storyblok/Feature.jsx
 import { storyblokEditable } from '@storyblok/react';


export default function Feature({ blok }) {
  return (
   <div className="feature" {...storyblokEditable(blok)}>
   <div className="feature">
      <span>{blok.name}</span>
    </div>
  );
}

Now, click on a component and see its corresponding block open up in the editor, or change a field value and see it rendered in real-time.

Repeat this for the rest of the components.

The useStoryblok hook used to fetch the home story automatically initializes the Storyblok Bridge for you.

Deploy the preview environment

Section titled “Deploy the preview environment”

We recommend setting up a second deploy environment and setting the version parameter to ‘draft’ in the Storyblok client and generating different tokens for each environment.

Use ‘published’ on your production deployment process.

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn