---
title: Visual Preview in Eleventy
description: Learn how to connect your Eleventy project to Storyblok’s Visual Editor for a seamless, intuitive content editing experience.
url: https://storyblok.com/docs/guides/eleventy/visual-preview
---
# 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.
> [!WARNING]
> The preview area requires an `https` secure connection. Learn more in the [Visual Editor concept](/docs/concepts/visual-editor).
Generate a valid local certificate using a tool of your preference, for example the `mkcert` package. Follow the instructions in the package’s [repository](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation) to install it.
In your project’s directory in your terminal and run this command.
```bash
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
```javascript
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.
> [!WARNING]
> 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
```javascript
import { storyblokEditable } from '@storyblok/js';
export default function Feature(blok) {
const attrs = storyblokEditable(blok);
return `
${blok.name}
`;
}
```
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
```html
{{ title }}
{{ content }}
```
{{ title }} {{ content }}