Element tree

The element tree provides a structural overview of your project, displaying all HTML elements and Nordcraft components 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 contains all HTML elements for you to add to your project, including existing components defined in your project. Use the element catalog to:

• Browse different HTML element types grouped by category
• Search for specific HTML elements by tag name and aliases (for example, you can search for link to find the HTML a tag)
• Search for project components by name
• 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.