Editable Regions bring page building to more site generators

Editable Regions now supports page components in Astro, Eleventy, Hugo, Next.js, Nuxt, and SvelteKit, with standalone React, Svelte, and Vue integrations for everything else. It’s the simplest way to set up visual editing in CloudCannon, and from today it’s what we recommend for new projects.

What Editable Regions does # Direct link to this section

Editable Regions lets you mark up the parts of a page your editors can change directly in the Visual Editor. There are region types for text, images, arrays, and components.

Once a component is registered, an editor can change its data and watch it re-render in place. They can also build a page out of blocks in the Visual Editor, adding, duplicating, reordering, and dragging them around, with the layout updating as they go. No sidebar round trip to check whether a heading now wraps onto two lines.

What’s new # Direct link to this section

We’ve added and improved support for component editing across six static site generators, plus three standalone integrations. Here’s what setup involves for each:

• Hugo: Import Editable Regions as a Hugo module and include the editable-regions partial in your <head>. The module registers your partials as components automatically. You’ll need Hugo 0.120.0 or later.
• Eleventy: Add the plugin to your Eleventy config, then load the register-components.js file it generates from your layout. That bundle registers your includes as components and re-renders them in the browser with a client-side Liquid engine, using your own filters, shortcodes, and tags so they match what you get at build time.
• Next.js, Nuxt, and SvelteKit: Wrap the routed page in the new EditableRegions component in your layout, then register your components from client-side code (a client component in Next.js, a client plugin in Nuxt, or onMount in SvelteKit). The wrapper waits for hydration to finish before it activates any regions, so editing works properly on server-rendered pages. Nuxt also needs a one-line compiler option so Vue treats the editable-* elements as native elements.
• Astro: If your .astro components contain React, Svelte or Vue islands, add the matching renderer import to your component registration script.
• Standalone React, Svelte, and Vue: Each integration provides functions you can use to register your components from your site’s client entry point.

We’ve also updated our documentation and guides, and we've upgraded our starter templates to use Editable Regions. Finally, we’ve updated our agent skills for Editable Regions in each supported SSG. This means you can point your coding agent at an existing site, armed with our skills, and it can handle most of the setup and component markup for you.

What this means for Bookshop # Direct link to this section

In general, if your site works with its current editing setup, and your editors are happy with it, we’d recommended leaving it as it stands. Moving a site from Bookshop to Editable Regions is possible, however, and in most cases you can keep using all your same components and a lot of your existing setup. To get the most out of Editable Regions you will have to add some new markup to your components, but this is exactly the kind of work our agent skills are good at.

If you’re starting a new project, though, we do recommend using Editable Regions.

Where to start # Direct link to this section

New to visual editing in CloudCannon? Start with our overview of Editable Regions.

We've also published a full guide for setting up Visual Editing in our Docs, which includes sections on defining Component Editable Regions, visually editing complex arrays, and page building, as well as SSG-specific instructions.