Visual Preview in Eleventy

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

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.

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

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

 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.

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

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.

Concept: Visual Editor

mkcert Homebrew Formula

mkcert GitHub Repository

Eleventy Dev Server Docs

Was this page helpful?

This site uses reCAPTCHA and Google's Privacy Policy (opens in a new window) . Terms of Service (opens in a new window) apply.

Get in touch with the Storyblok community