Canopy Overview

Canopy is Blutui's in-page editor designed to streamline the website creation process. It empowers developers to construct the website's structure and content managers to edit pages directly within the interface.

Content management

Canopy fosters a collaborative workflow between developers and content managers. Developers can leverage tags within their code to designate specific areas editable through Canopy. This establishes clear separation between the codebase and content, allowing content managers to modify website copy without needing to touch the code.

Learn more on the Blutui documentation page

Canopy Bar

The Canopy bar, located at the bottom of the Canopy editor, provides all available functions in Canopy.

• Component Tree: Use this button to navigate and identify specific Canopy elements within the page structure.
• Toggle Options: Show or hide the Canopy item options if they obstruct your content.
• Toggle Guides: Click this button to visually highlight all editable regions on the page.
• Responsive View: Resize the Canopy editor to view your page on Mobile, Tablet, and Desktop by clicking the respective buttons. You can also rotate the screen in mobile and tablet views by clicking the Rotate button.
• Pages Dropdown: Navigate through all the pages set up in your project's console. You can also navigate within your page by clicking on the navigation links.
• Preview: Click the Preview button to view the edited page as it would appear in production.

Component Tree

Use the Component Tree to easily navigate the page structure and identify specific Canopy elements.