Skip to content

Elements Tree

Overview

The Elements Tree is the top panel of the Component Editor's right panel. It shows every UI element in the component — components, HTML elements, and layout components — arranged in a tree that reflects the actual DOM hierarchy. This makes the component structure visible even when it is not obvious from the canvas alone.

What You Will Learn

  • How the Elements Tree is structured and how to navigate it
  • How to add, reorder, and delete elements using the toolbar and drag and drop
  • How to search the tree to find specific elements
  • How to use the context menu to edit, copy, and refactor elements

When To Use This

Use the Elements Tree when you need to add, reorder, search, or refactor UI elements in a component — especially for deeply nested structures that are difficult to select directly on the canvas.

Tree Structure

The tree always has a single root node named after the component (for example, UserCard). All UI elements are nested inside this root. The root node cannot be deleted or moved.

1
2
3
4
5
UserCard
├── div
│   └── input
├── button
└── ...

Selecting a node in the tree also selects the element in the canvas and updates the Properties and Styles views in the right sidebar.

Toolbar

The Elements Tree toolbar sits above the tree and provides buttons for adding, navigating, and managing elements.

Adding Elements

Click + to open the component picker — a searchable list of everything you can add to the component:

  • Built-in UI components and layout components
  • App components (components defined within the current app)
  • Global components (org-wide reusable components)
  • HTML elements

Navigate the list with the Up and Down arrow keys. Press Enter or double-click an item to insert it.

Add Modes

The picker supports three insertion modes, selected by holding a modifier key when inserting:

Mode Key Behaviour
Add To (none — default) Inserts the element inside the currently selected element
Add After Hold Shift Inserts the element after the currently selected element
Replace Hold Ctrl Replaces the currently selected element

Picker Settings

Click the cog icon in the bottom-right corner of the picker to adjust the list:

Setting Description
Sort By Name Sorts the list alphabetically instead of by category
Include Toggles visibility of each category: Core Components, My Components, Layouts, HTML Elements

Other Toolbar Buttons

Button Description
Generate Form Opens the Generate Form wizard to scaffold a form from a data structure
Delete Deletes the selected element(s). Can be undone with Undo
Collapse Collapses all nodes in the tree
Expand Expands all nodes in the tree
Arrow Up Moves the selected element up within its parent
Arrow Down Moves the selected element down within its parent
Arrow Left Moves the selected element out of its parent into its grandparent
Arrow Right Moves the selected element into the nearest eligible sibling
Search Opens the search field to filter the tree by element name

Reordering Elements

You can rearrange elements in the tree in two ways:

  • Drag and drop — click and drag a node to a new position in the tree. A placement indicator shows where the element will be dropped.
  • Toolbar arrow buttons — use the directional arrows in the toolbar to move the selected element one step at a time: up or down within its parent, out to its grandparent (left arrow), or into the nearest eligible sibling (right arrow).

Click Search in the toolbar to open the search field and type to filter the tree. Nodes that do not match the search term are hidden, leaving only matching elements and their ancestors visible. Clear the search field to restore the full tree.

Context Menu

Right-click any node in the tree to open the context menu. The available items depend on the type of element selected. The root component node has a reduced set of options.

Edit

Action Description Availability
Edit Content Opens the Edit Content dialog All elements except components, images, audio, video, and the root component node
Edit Component Opens the component in its own Component Editor Nested custom components only (app or global)
Edit Classes Opens a chip-style dialog to add or remove CSS class names on the element All elements except the root component node
Edit Comments Opens a text editor to attach developer notes to the element. Notes are not visible in the deployed app All elements
Delete Deletes the selected element(s). Can be undone with Undo Deletable elements only (the root component node cannot be deleted)

Copy

Action Description
Duplicate Duplicates the selected element(s) in place within the same parent
Cut Cuts the selected element(s) to the clipboard
Copy Copies the selected element(s) to the clipboard
Paste Pastes clipboard element(s) at the selected node
Paste HTML Parses raw HTML from the clipboard and inserts it at the selected node

Copy group actions are not available for the root component node.

Refactor

Action Description
Extract as Component Extracts the selected element(s) into a new reusable component. Available when all selected elements share the same parent and are not the root component node
Wrap In › Div block Wraps the selected element(s) in a <div>
Wrap In › Link block Wraps the selected element(s) in an <a>
Wrap In › Horizontal Box Wraps the selected element(s) in a Horizontal Box layout
Wrap In › Vertical Box Wraps the selected element(s) in a Vertical Box layout

Miscellaneous

Action Description
Open Preview Opens a preview panel for the asset. Available only for Image, Audio, or Video elements whose source URL points to an app asset

Helpful Resources