Visual Preview

Connect your Svelte application to Storyblok’s user interface to unlock live previews and the Visual Editor.

Add a preview access token

Go to Settings > Access Token and generate a preview access token. Update your environment variables with your new token:

VITE_STORYBLOK_DELIVERY_API_TOKEN="EXAMPLE_PREVIEW_TOKEN"

Fetch draft content

Update your Storyblok Content Delivery API query (e.g. in src/routes/+page.js to fetch the draft version of your content:

export async function load({ params, parent }) {
	
  const { storyblokAPI } = await parent();
	  
  const response = await storyblokAPI.get("cdn/stories/home", 
	  { version: "draft" } // Specify `draft`
	)
	
  return {
    story: response.data.story,
  };
}	

This will allow your website to display unpublished drafts.

Configure Storyblok bridge

The Storyblok bridge API client handles communication between the editor and your website to enable visual editing.

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()}

On every page of your website, this page will launch the Storyblok bridge API client when your website loads in the Visual Editor.

On all of your blok components, use the storyblokEditable action from @storyblok/svelte to add Storyblok-specific attributes to the root element for each component.

<script> 
  import { storyblokEditable } from "@storyblok/svelte"

  export let blok;
</script>

<div {...storyblokEditable(blok)}>
  <h2>{blok.headline}</h2>
</div>

The storyblokEditable action will add data attributes to silently identify the component in the Visual Editor.

Configure Storyblok editor

In your Storyblok space, go to Settings > Visual Editor and set the default environment. This is the website that will load in the editor interface.

localhost environment

When building your website, you might want to preview your site on localhost.

Storyblok requires an HTTPS connection for previews. In dev mode, SvelteKit serves your website over insecure HTTP on localhost. To preview your localhost website in Storyblok, follow these instructions to run SvelteKit over HTTPS on localhost on Mac or Windows.

When you run your website on HTTPS, you will need to choose a new port to serve your website, (for example, https://localhost:6173). This can be whatever you want, but you must remember it for the next step.

Go to Settings > Visual Editor and set the default environment to the URL of your HTTPS dev server (in the example from the previous step, https://localhost:6173).

Web environment

Once your colleagues are working on your website, you will want to preview your site deployed website.

To preview a live version of your website, first deploy your website on a hosting service over HTTPS.

Go to Settings > Visual Editor and set the default environment to the URL of your published site (for example, https://example.com).

Set real path

The slug for your home story is /home. The real path option allows you to override this slug and set the path to /.

Open your home story, click Config, and set Real path to /. Now you should see your home story in the Visual Editor.