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.

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

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

Add the plugin to your Vite config file.

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.

<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:

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

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

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

{@render children()}

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.

@storyblok/svelte Package Reference

Concept: Visual Editor

Vite server options

vite-plugin-mkcert

Get in touch with the Storyblok community