Skip to content
Storyblok Documentation Docs

Visual Preview in Eleventy

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

Connect your local environment

Section titled “Connect your local environment”

Go to Settings > Visual Editor and set the default environment to the URL of your local server. Eleventy’s Dev Server default is localhost:8080, for example.

Generate a valid local certificate using a tool of your preference, for example the mkcert package. Follow the instructions in the package’s repository to install it.

In your project’s directory in your terminal and run this command.

Terminal window
mkcert localhost

Place the two generated files, localhost.pem and localhost-key.pem in a new .certs folder.

Set the server options to use them as certificates.

.eleventy.config.js
export default function eleventy(config) {
  config.setServerOptions({
    https: {
      key: '.certs/localhost-key.pem',
      cert: '.certs/localhost.pem',
    },
  });
}

Refresh your editor page, your project should be visible in the preview area.

Set up Storyblok’s Bridge

Section titled “Set up Storyblok’s Bridge”

Connect your custom components with their Storyblok counterparts via the storyblokEditable module.

src/_components/feature.js
 import { storyblokEditable } from '@storyblok/js';


export default function Feature(blok) {
  const attrs = storyblokEditable(blok);


  return `<div
    class="feature storyblok__outline"
    data-blok-uid="${attrs['data-blok-uid']}"
    data-blok-c="${attrs['data-blok-c']}"
  >
    <span>${blok.name}</span>
  </div>`;
}

Pass the blok object to the storyblokEditable and get the attributes to render in your root element. Optionally, add the storyblok__outline class.

Repeat this for the rest of the components.

Add the Storyblok Bridge script in the head of your base layout and initialize it.

src/_includes/layouts/base.liquid
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }}</title>
  <script src="//app.storyblok.com/f/storyblok-v2-latest.js" type="text/javascript"></script>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const storyblokBridge = new StoryblokBridge();
    });
  </script>
</head>
<body>
  {{ content }}
</body>
</html>

Restart your Eleventy project to see the changes. Now, click on a component and see its corresponding block open up in the editor.

Deploy the preview environment

Section titled “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.

Section titled “Related Resources”
Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn