Visual Preview in Eleventy

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. Eleventy’s Dev Server default is localhost:8080, for example.

The preview area requires an https secure connection.

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.

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

To visualize correctly the home story, go to the Config section and write / into the real path field.

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 `<p
    class="feature storyblok__outline"
    data-blok-uid="${attrs['data-blok-uid']}"
    data-blok-c="${attrs['data-blok-c']}"
  >
    <span>${blok.name}</span>
  </p>`;
}

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.

Learn more about the available Bridge options for this package.

With Eleventy running only on the server, real-time Bridge updates are not possible. You will need to restart or trigger a new build on your Eleventy project for your local to reflect content changes.

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.

Learn more about preview and production environments in this tutorial.

Previous Part

Integrate Eleventy with Storyblok

Next Part

Dynamic Routing in Eleventy

Visual Preview in Eleventy

Connect your local environment

Set up Storyblok’s Bridge

Deploy the preview environment

Related links