Configure Component Editable Regions

Astro

In Astro, you register each component you want to edit, then load your registration script when the page opens in the Visual Editor.

To install the integration in Astro:

1. Open your website project in your local development environment and run the npm install @cloudcannon/editable-regions command in your terminal.
2. Import the Editable Regions integration in your Astro configuration file, astro.config.mjs.
3. Create a registration file for your components (e.g., src/scripts/register-components.js⁠) and register each component you want to edit.
4. Import your registration file from your layout, inside the <body> element.
5. Save your changes and rebuild your Site.

import editableRegions from "@cloudcannon/editable-regions/astro-integration";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [editableRegions()],
});

import { registerAstroComponent } from '@cloudcannon/editable-regions/astro';
import CTA from '../components/CTA.astro';

registerAstroComponent('cta', CTA);

<script> 
  if (window.inEditorMode) {
    import("../scripts/register-components.js").catch((error) => {
      console.warn("Failed to load CloudCannon component registration:", error);
    });
  }
</script>

If your Astro components contain React, Svelte, or Vue components, add the matching renderer to your registration file.

import '@cloudcannon/editable-regions/astro-react-renderer';
import '@cloudcannon/editable-regions/astro-svelte-renderer';
import '@cloudcannon/editable-regions/astro-vue-renderer';

If your components are .jsx or .tsx files rather than .astro files, register them with registerReactComponent instead.

import { registerReactComponent } from '@cloudcannon/editable-regions/react';
import CTA from '../components/CTA.jsx';

registerReactComponent('cta', CTA);

Eleventy

In Eleventy, there is no registration step. CloudCannon resolves component names the same way your templates resolve includes, so {% include "author-card" %} matches data-component="author-card".

To install the plugin in Eleventy:

1. Open your website project in your local development environment and run the npm install @cloudcannon/editable-regions command in your terminal.
2. Add the Editable Regions plugin to your Eleventy configuration file.
3. Import the generated registration script from your layout, inside the <body> element.
4. Save your changes and rebuild your Site.

import editableRegions from "@cloudcannon/editable-regions/eleventy";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(editableRegions);

  return {
    dir: { input: "src", includes: "_includes", output: "_site" },
  };
}

After every build, the plugin writes a register-components.js file into your output directory. This file contains a browser version of the Liquid engine, your include templates, and your filters, shortcodes, and tags, copied from your Eleventy configuration file.

<script>
  if (window.inEditorMode) {
    import("/register-components.js").catch((error) => {
      console.warn("Failed to load CloudCannon component registration:", error);
    });
  }
</script>

The plugin also adds an includeWith tag, which passes an object to an include as separate values. Use this when your component data is a single structured data key.

<div data-editable="component" data-component="post-meta" data-prop="postMeta">
  {% includeWith "post-meta", postMeta %}
</div>

Hugo

Hugo uses a Hugo module rather than an NPM package. There is no registration step: CloudCannon resolves component names as partial names, so data-component="card" and data-component="card.html" both render layouts/partials/card.html.

To install the module in Hugo:

1. Open your website project in your local development environment and run the hugo mod get github.com/CloudCannon/editable-regions@<version> command in your terminal.
2. Add the module to your Hugo configuration file, pinned to a version.
3. Include the Editable Regions partial in the <head> element of your base layout.
4. Save your changes and rebuild your Site.

[module]
  [[module.imports]]
    path = "github.com/CloudCannon/editable-regions"
    version = "<version>"

{{ partial "editable-regions" . }}

CloudCannon rebuilds your templates in the browser from the files bundled at build time, so module imports only resolve against files inside your project. Themes in your themes folder are included automatically. If you use Hugo modules from the module cache, run hugo mod vendor so CloudCannon can resolve them.

JavaScript frameworks

Sites built with React, Vue, or Svelte hydrate in the browser, which can conflict with the way CloudCannon connects Editable Regions. To avoid this, wrap your page content in the EditableRegions component, which waits for your framework to finish hydrating first.

This applies to Next.js, Nuxt, and SvelteKit, as well as single-page applications built directly with React, Vue, or Svelte.

To install the root component in a JavaScript framework:

1. Open your website project in your local development environment and run the npm install @cloudcannon/editable-regions command in your terminal.
2. Wrap your routed page content in the EditableRegions component, in your root layout.
3. Register your components from a client-side file, checking for Editor Mode first.
4. Save your changes and rebuild your Site.

import { EditableRegions } from "@cloudcannon/editable-regions/react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <EditableRegions tag="main">{children}</EditableRegions>
      </body>
    </html>
  );
}

Import EditableRegions from @cloudcannon/editable-regions/react, /vue, or /svelte, depending on your framework. The tag attribute sets which HTML element the component renders, and defaults to div.

Register your components from a file that only runs in the browser, such as a client component in Next.js or a client plugin in Nuxt. Use registerReactComponent, registerVueComponent, or registerSvelteComponent, imported from the same path as EditableRegions.

import { registerVueComponent } from "@cloudcannon/editable-regions/vue";
import CTA from "../components/CTA.vue";

export default defineNuxtPlugin(() => {
  if (window.inEditorMode) {
    registerVueComponent('cta', CTA);
  }
});

If you use Nuxt, you also need to tell Vue to treat the Editable Regions web components as standard HTML elements.

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("editable-"),
    },
  },
});

Your Site must output static HTML files for CloudCannon to build a preview. In Next.js, set output: "export" in your Next configuration file. In SvelteKit, use the static adapter and prerender every route. In Nuxt, configure Nitro to prerender your site, then build with nuxt generate.