Use Visual Editor with Eleventy

Learn how to use Visual Editor with an Eleventy-based website.

Configure Visual Editor for an Eleventy project

Eleventy is supported through the ssgName: eleventy option and requires some additional custom options.

// stackbit.config.ts
export default {
  stackbitVersion: "~0.6.0",
  ssgName: "eleventy",
  nodeVersion: "18",

  // Eleventy to run inside Visual Editor container
  devCommand: "npx @11ty/eleventy --serve --port {PORT}",

  // Eleventy-specific configuration
  experimental: {
    ssg: {
      proxyWebsockets: true,
      logPatterns: {
        up: ["Server at"],
      }
    }
  },

  // Specific option to prevent Visual Editor from interfering with Eleventy's page reload mechanism
  customContentReload: true
};

Note the use of some experimental configuration properties and customContentReload to ensure compatibility with Eleventy:

1. experimental.ssg.logPatterns.up is set to ['Server at']. This is part of the log message that appears when the Eleventy dev server is ready to accept requests.
2. experimental.ssg.proxyWebsockets is set to true, which enables proxying of the Eleventy websocket to Visual Editor. This allows the website to refresh when content changes.
3. customContentReload set to a true, which disables the Visual Editor’s built-in methods for refreshing the page when content changes. By combining this setting with experimental.ssg.proxyWebsockets, Eleventy will refresh content using it’s own mechanisms without the Visual Editor interfering with it.

Run the Visual Editor locally

The Visual Editor’s default port is 3000. To run Visual Editor locally with an Eleventy project, you need to change the port that Eleventy runs on to 3000:

npx @11ty/eleventy --serve --port 3000

Another option is to use the Visual Editor CLI command to run the Visual Editor on the port that Eleventy uses:

stackbit dev --port 8083