Visual Preview in Svelte

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

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.

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, go to the Config section and write / into 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.

Related Resources

• Concepts - Visual Editor
• Storyblok Svelte package reference
• Vite server options documentation
• vite-plugin-mkcert package