Element tree

The element tree provides a structural overview of your project, displaying all elements and componenents in your page or component hierarchically.

Element tree

Live

• Elements are named according to their HTML tag or component name
• Toggle visibility of child elements using the triangle icon to collapse sections
• Select elements by clicking on them, just as in the canvas
• Drag elements to reorder them within the structure

Right-clicking an element opens a context menu with several actions.

Element context menu

Live

1. 1

   Add element: Opens the element catalog
2. 2

   Wrap in element: Place the element inside a new parent element
3. 3

   Extract as component: Convert the element into a reusable component
4. 4

   Show/hide: Set a formula to control element visibility
5. 5

   Repeat: Apply a formula to create multiple instances from an array
6. 6

   Standard operations: Duplicate, cut, copy, paste and delete

Add a new element in one of three ways:

• select Add element from the context menu
• click the + button in the sidebar header
• use the shortcut I to open the element catalog

Element catalog

Live

The element catalog provides a collection of HTML elements and components organized by category. This makes it easy to find exactly what you need for your project. The catalog allows you to:

• Browse different element types grouped by functionality
• Search for specific elements and components
• View components from installed packages

Select an element to add it to your project. The element will be added as a child of the currently selected element or as the first child of the root element if no element is selected.