Updated Editable Regions, Configuration Mode, and a UI overhaul

This release includes a new version of CloudCannon, featuring updates to key UI elements and features. New CloudCannon users will experience the new version of CloudCannon automatically, while existing users can opt in to the new version.

The new version of CloudCannon updates our Editable Regions feature for configuring the Visual Editor by adding HTML attributes to your existing Site, introduces Configuration Mode for updating your CloudCannon Configuration File throughout the app, adds in-app guides for configuring various CloudCannon features, and overhauls several areas of UI, including the Site Dashboard, Site Navigation, Site Header, Organization Home, and more.

We will support the previous version of CloudCannon (which does not support updated Editable Regions or Configuration Mode) until February 2026. If required, you can return to the previous version of the app at any time using the Return to the previous version option in the Account menu. If you have any feedback about this change, please get in touch with our support team, contribute to our Community discussion, or reach out to us through your dedicated Slack channel.

This release also addressed several issues, including those affecting the Visual Editor, the Save changes modal, uploading files to a DAM, and the Sites Browser filter.

Features & Improvements#

Updated Editable Regions#

This release updates our existing Editable Regions feature to extend visual editing configuration. With updated Editable Regions, you can add HTML attributes or web components to any file that produces an HTML webpage at build time. You can visually edit data stored in HTML within layout files (e.g., .astro, .liquid, .tsx, etc), structured data in front matter or data files, and Markdown content, all inline on a preview of your webpage.

You do not need to change your file structure or data format, and can migrate at your own pace by starting with key fields and gradually adding more. Additionally, this update introduces no breaking changes, so previously configured methods of visual editing will not be affected. Most updated Editable Regions work with all SSGs (currently, Component Editable Regions are only available for Astro and React components).

• Added six new types of Editable Region: Text, Image, Source, Array, Array Item, and Component.
  • For example, you can define a Text Editable Region with the HTML attribute data-editable="text" or the web component <editable-text>.
  • Tell CloudCannon where your data is stored using the data-prop or data-path HTML attribute.
• You can now edit text values inline, update image details, add, remove, or reorder array items, and re-render changes to components in the Visual Editor.
• CloudCannon will re-render any changes you make using the data panel, sidebar, or inline in the Visual Editor, keeping the preview of your webpage accurate.
• Each Editable Region requires different HTML attributes, so we highly recommend reading our new Set up Visual Editing guide.

For more information, please read our documentation on Visual Editing in general, or see our Editable Regions reference documentation for a complete list of configuration options.

Configuration Mode#

We have added a new tool to your Sites on CloudCannon: Configuration Mode. Configuration Mode is only available on Sites using Unified Configuration. For more information, please read our Migrate to Unified Configuration guide.

• You can find the Configuration Mode switch in the top right of your Site (in your new Site Header). Turning Configuration Mode on reveals purple Edit Configuration buttons across your Site.
• Each Edit Configuration button opens a data panel for specific fields in your CloudCannon Configuration File, allowing you to see your configuration changes live and in context.
• Configuration Mode allows you to select which Collections are visible in your Site Navigation, the configuration for each Collection, your Inputs at each level of the configuration cascade, add actions to your Dashboard, and more.
• This tool replaces the Edit your configuration file button on the Editing page under Site Settings. However, you can still open your CloudCannon Configuration File in the Data Editor through your File Browser.
• You can turn Configuration Mode off at any time to hide all Edit Configuration buttons and return to a normal editing experience.

For more information, please read our new Getting Started with CloudCannon guide or our documentation on Configuration Mode in general.

Site Navigation updates and new Site Header#

• Added the new Site Header UI, freeing up room in your Site Navigation for more Collections.
  • Moved the Site name, icon, project, and branch information from the Site Navigation to the left of the Site Header.
  • Moved the Avatar list, Open URL, and Save button to the right of the Site Header. The location of the Save button is now consistent between the Site Dashboard and any editing interface.
• The Publishing button is now a link, making it consistent with other UI elements that open pages rather than perform actions or open modals.
• Removed the numbers from the Publishing changes indicator, instead showing a downwards arrow for available updates and an upwards arrow for unpublished changes.
• The Developer section is now pinned to the bottom of your Site Navigation and collapsible.
• Updated the Syncing Conflict notification on the Save button to a red ! character.

Site Dashboard updates#

• Removed the Status page to reduce information redundancy with the Site Dashboard and address user confusion about where to find information.
  • Moved the Syncs, Builds, and Build Deploys tabs from the old Status page to your Site Dashboard.
  • Replaced the Suggestions and Recommendations sections of the Status page and other onboarding information with new in-app guides on the Guides tab of the Site Dashboard.
• The Status indicator icon is now next to the Dashboard link in your Site Navigation and the Summary tab on your Dashboard.
• Updated the Summary tab of your Site Dashboard.
  • Added the Active Guide section to the left column.
  • Added a Sync and Build preview section to the right column, which displays the status of your most recent sync and build. You can trigger a sync or build using the Pull or Rebuild buttons.
  • Added a Usage section to the right column, which displays the bandwidth and build time used this month.
  • Moved the Actions section to the right column.
  • Moved the Recent Activity section to the left column and improved the UI to resemble a timeline better. The Recent Activity section on the Summary tab now only displays the three most recent events.
  • Removed the Live URL text field.
  • Removed the Laptop and Phone Home page preview.
• Minor UI updates to the Activity tab to resemble a timeline better.
• Added the Usage tab to your Site Dashboard.
  • You can now see a graph of bandwidth and build time usage for your Site.
  • Added a table showing bandwidth usage per URL on your Site, including the number of requests. 
• Moved the Recently Opened section from the Site Dashboard to the Open Recent option in the Editing Interface Context Menu.
• New Dashboard icon in the Site Navigation.

New in-app Guides#

• Added a Guides tab to your Site Dashboard.
• In-app guides are designed to assist you in configuring different CloudCannon features. Currently, there are three in-app guides: Getting Started with Editing, Set up Visual Editing, and Host your website on the Internet.
  • The Getting Started with Editing guide will start automatically when you create a new Site. However, branching from a Site that has already completed a guide will not restart it.
• When you select an active guide on the Guides tab, CloudCannon will display the next steps to complete on your Dashboard Summary tab.
• Each in-app guide will also have a counterpart on the CloudCannon Documentation website, providing more context, best practices, and helping you troubleshoot any issues.
• You can turn off the active guide prompt on your Summary tab at any time using the Disable Guides button on the Guides tab.
• In-app guides focused on your Organization will also appear on the new Organization Home page.

New Organization Home page#

• Added the Organization Home page, which you can access using the Home button in the App Sidebar.
• The Organization Home page acts like a dashboard for your Organization, with a Summary, Activity, Usage, and Guides tabs.
• On the Summary tab, you can see an overview of your Organization, including your active guide, your unsaved changes, the three most recent activities across your Organization, and a usage graph of bandwidth used this month.
• On the Activity tab, you can see a timeline of all recent activity across your Organization.
• On the Usage tab, you can now see a graph of bandwidth usage and a table showing bandwidth usage per URL, including the number of requests, for all Sites in your Organization.
• On the Guides tab, you can see your active and available in-app guides for configuring different CloudCannon features. Currently, there is one in-app guide for your Organization, Getting Started: Setting up your Organization.
  • Only members of the Owners Permission Group can see the Guides tab.
  • You can turn off the active guide prompt on your Summary tab at any time using the Disable Guides button on the Guides tab.

Performance and Accessibility Improvements#

• Updated app routing so navigating between pages on CloudCannon is now faster, with fewer redirects.
• Added parallel loading to improve app speed when opening a Site.
• When you create a new Site, CloudCannon will direct you straight to the Dashboard rather than a file loading screen, where you can track syncing progress.
• Better rendering to make the app more responsive.
• Reduced page flicker.
• Added more semantic markup to CloudCannon, improving the experience for accessibility tools like screen readers.
• Updates to your CloudCannon Configuration File (including those using Configuration Mode) now appear in the app immediately.

Other Features & Improvements#

• You can now drag and drop array items between Array Inputs, including between browser windows.
• When editing inside a nested object in the Data Editor, CloudCannon will now show as many levels of object as possible rather than centering the screen on the current depth.
• Added a Generate initial site settings button to the Build Configuration page under Site Settings once you have a successful build.
• Updated the Projects and Domains pages to be more consistent.
• The App Sidebar now has the Sites button before Projects to reflect the commonly used UI better.
• You can now configure the View menu options in your Collection Browser.
• Updated the configuration GUI for the Sort menu in your Collection Browser.
• Better UI for displaying direct/raw values when configuring your Preview options.
• Better UI for the Suggested boxes, such as when configuring your build settings.
• Minor UI changes to scrollable areas.
• Minor changes to the editing interface Header.

Fixes#

• Fixed an issue where, in some cases, the Visual Editor would fail to load and display a "Loading timed out, retrying..." error.
• Fixed an issue where you could rename the CloudCannon Configuration File in the Save changes modal.
• Fixed an issue where the Save changes modal would update incorrectly when you fixed a validation error in another tab.
• Fixed an issue where, when uploading a file to your DAM through a File input, the file would not appear in the DAM Browser without refreshing CloudCannon.
• Fixed an issue where the Sites Browser did not correctly preserve filter terms.