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:
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.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.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 withexperimental.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
Did you find this doc useful?
Your feedback helps us improve our docs.