Element tree

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

Element tree

Live

• Elements are named according to their HTML tag or component name
• Select elements by clicking on them
• Toggle visibility of child elements using the triangle icon at the left of the element to collapse or expand sections
• Drag elements to reorder them within the structure

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

Element context menu

1. 1

   Insert element: Open the HTML element catalog to choose a new element to insert
2. 2

   Wrap in element: Place the currently selected HTML element inside a new parent element and open the HTML catalog
3. 3

   Extract as component: Convert the HTML element and all child elements into a reusable component
4. 4

   Show/hide: Set a formula to control whether an element or component is visible or not
5. 5

   Repeat: Set a formula to create multiple instances of an element or component from an array
6. 6

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

Add a new element in one of three ways:

1. 1

   Click the + Element button in the bottom bar
2. 2

   Use the keyboard shortcut I to open the element catalog
3. 3

   Select Insert element from the right-click context menu in the HTML element tree

Element catalog

Live

The element catalog contains all HTML elements and any components available 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

Click an element from the catalogue to add it to the HTML element tree. The element will be added as a child of the currently selected element or as the last child of the root element if no element is selected.