---
title: Visual Preview in React
description: Learn how to connect your React project to Storyblok’s Visual Editor for a seamless, intuitive content editing experience.
url: https://storyblok.com/docs/guides/react/visual-preview
---

# Visual Preview in React

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

## Connect your local environment

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

> [!WARNING]
> The preview area requires an `https` secure connection. Learn more in the [Visual Editor concept](/docs/concepts/visual-editor).

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

```bash
npm install vite-plugin-mkcert --save-dev
```

Add the plugin to your Vite config file.

vite.config.js

```javascript
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.

> [!WARNING]
> To visualize the home story correctly, go to the **Config** section and write `/` into the **Real path** field. This is needed because on Storyblok, the slug of the home story will be `/home` , but in our code, we are rendering on the `/` route! Learn more about paths in the Visual Editor [concept](/docs/concepts/visual-editor).

## Set up Storyblok’s Bridge

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

src/storyblok/Feature.jsx

```javascript
 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.

> [!NOTE]
> Learn more about the available [Bridge options](https://www.storyblok.com/docs/libraries/js/react-sdk) for this package.

## 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.

> [!NOTE]
> Learn more about preview and production environments in this [tutorial](https://www.storyblok.com/tp/create-preview-production-environments-and-deploy).

## Related resources

[@storyblok/react Package Reference](https://www.storyblok.com/docs/libraries/js/react-sdk)

[Concept: Visual Editor](/docs/concepts/visual-editor)

[mkcert Homebrew Formula](https://formulae.brew.sh/formula/mkcert#default)

[mkcert GitHub Repository](https://github.com/FiloSottile/mkcert)

  

## Pagination

-   [Previous: Integrate React with Storyblok](/docs/guides/react)
-   [Next: Dynamic Routing in React](/docs/guides/react/dynamic-routing)