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

# Visual Preview in Svelte

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 { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';
import mkcert from 'vite-plugin-mkcert';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    plugins: [
      sveltekit(),
      mkcert()
    ],
  }
});
```

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

To visualize the home story correctly, select the **Config** section and type `/` in the **Real path** field.

## Set up Storyblok’s Bridge

Connect the Svelte components in your project with their Storyblok counterparts by using the `v-editable` directive.

src/lib/Feature.svelte

```html
<script>
  import { storyblokEditable } from "@storyblok/svelte"
  export let blok;
</script>


<div class="feature">
<div class="feature" {...storyblokEditable(blok)}>
  <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 other components.

Create `src/routes/+layout.svelte` and paste in the following code:

src/routes/+layout.svelte

```html
<script>
  import { useStoryblokBridge } from "@storyblok/svelte"
  import { onMount } from "svelte";

  onMount(() => {
    useStoryblokBridge()
  })

  let { children } = $props();
</script>

{@render children()}
```

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

## Deploy the preview environment

We recommend setting up a second deploy environment and setting the `'version'` parameter to `'draft'` 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/svelte Package Reference](https://www.storyblok.com/docs/libraries/js/svelte-sdk)

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

[Vite server options](https://vite.dev/config/server-options.html#server-https)

[vite-plugin-mkcert](https://www.npmjs.com/package/vite-plugin-mkcert)

  

## Pagination

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