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.

An expanded view of the HTML element tree, showing an array of HTML elements and Nordcraft components in a hierarchical structure.

Context menu

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

An annotated image of a context menu that appears when you right-click an element. The annotations correspond to the list items below.

  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 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

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

The HTML element catalog is open, showing a searchable dialog, category filters on the right and the list of search results on the left.

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 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.

Tip

If you need to change the tag name of an HTML element, edit its Tag in the Attributes panel on the right. This saves you having to delete and re-add elements.

08/15/2025
Edit article
Help Forum