The Builder Tree
The Builder's layers panel: how rows are named, the right-click menu, drag and drop, multiple selection and keyboard shortcuts.
The Builder Tree
The Builder tree is the layers panel of the page you're editing. It used to be called the HTML Tree View. Each row is an element of the page, a component, a Repeat or a Show if, in the order they appear in your code. The tree is the left side of Design mode; this page covers the tree itself in detail.
To open it, click Builder in the activity bar (⌥2 in Design mode, ⌥4 in Code mode). In Code mode the tree sits next to the file tree and code editor, so you can use it alongside your code.
The header
| Item | What it does |
|---|---|
| Page name | The page switcher: open another page, layout or component, create one, or open Page settings |
| Search | Search layers: filter the tree by name. ↑ ↓ move through the results, Esc closes the search |
| Undo / Redo | ⌘Z / ⌘⇧Z |
| Add | Opens the Add panel next to the tree |
| ⋯ | Expand to level (0 to 4, or All), Collapse all, and Follow the code cursor |
Follow the code cursor is for Code mode: as you move the cursor in the code editor, the tree selects the element at that line.
At the top of the tree
- The page at a glance. On pages with several sections, a line lists them in order (Hero · Features · Latest posts), with a second line of facts such as data sources, Repeats and components. Click a section to select it.
- The Data group. What the page or component works with: collections, CMS data, data files, lists written in the page, fetches and, in a component, its props. Collapsed, it shows a one-line summary. Its buttons add a list (+ List), edit the page's frontmatter (the code where the page reads its data) in a small editor, and, in a component, add a prop. See Data Sources.
How rows are named
Rows are named by what they show, not by their HTML tag:
- Text elements by their text, and images by their alt text, with a thumbnail.
- Page sections in bold, with a divider above.
- Plain containers dimmed. Wrappers without a name are called Card or Decoration, or take their name from their
idoraria-label. A div that only wraps another div shows as one row, such as "Container › Grid". - Components in green. Interactive components (Astro islands) have a ⚡.
- Repeats and conditions as sentences: "Repeat each post in posts · first 6", "Show if image is set", or "If … / Otherwise", with the data names highlighted. A Repeat also shows how many copies the preview renders (×6).
To give a row your own name, double-click it (except components, which open instead), press F2, or right-click and choose Rename Label.
Selecting and editing
Click a row to select it. The element is selected in the preview too, and a card opens under the row with its content: text, link, image, or a component's props. Click the row again, click the card's ×, or press Esc to close the card.
Hovering a row shows two buttons:
- + adds an element inside it (or after it, if it can't hold children).
- The style button (or, on a component, the content button) opens the Style panel or the component's card.
Double-click a component's row to open the component and edit its design. Going into a component and back keeps each file's open rows, selection and scroll position.
The right-click menu
| Item | What it does |
|---|---|
| Add Before… / Add After… / Add Inside… | Pick an element to add, or Paste HTML… |
| Rename Label | Give the row your own name |
| Make a component… | Turn the element and its look-alikes into one component, with what differs as props |
| Turn look-alikes into a list… | Turn repeated, hard-coded elements into a list and one repeated element |
| Show if… | Show the element only when a condition is true |
| Repeat for each… | Show the element once per item of a list |
| Rename Component | Rename a component and update every place that uses it |
| Duplicate | ⌘D |
| Copy styles / Paste styles | ⌥⌘C / ⌥⌘V |
| Delete… | Asks to confirm, then deletes. Undo with ⌘Z |
Show if and Repeat for each are explained in Design Mode and the Builder.
Drag and drop
Drag a row to move the element. A line shows where it will land: above or below another row, or inside it when that row is highlighted. A small chip with the element's name follows the pointer. You can also drop items from the Add panel onto the tree.
With a row selected, ⌥↑ and ⌥↓ move it up and down among its siblings.
Several rows at once
⌘-click (Ctrl-click) or Shift-click rows to select several. A bar above the tree offers:
- Group: wrap them in one container (they must be next to each other).
- Duplicate (⌘D), Paste styles (⌥⌘V) and Delete (⌫).
Each is one change you undo at once. Esc clears the selection.
Look-alike suggestions
When you select one of several elements with the same structure, such as three cards in a grid, a suggestion under the tree says how many look alike and offers Make a list or Component. Dismiss it with its ×.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| ↑ ↓ | Select the previous or next row |
| ← → | Collapse or expand the selected row |
| ⌥↑ / ⌥↓ | Move the element among its siblings |
| F2 | Rename the row's label |
| ⌘C / ⌘X / ⌘V | Copy, cut and paste elements |
| ⌘D | Duplicate |
| ⌫ | Delete |
| ⌥C | Edit classes |
| ⌥⌘C / ⌥⌘V | Copy and paste styles |
| ⌘Z / ⌘⇧Z | Undo and redo |
| Esc | Close the open card, or clear a multiple selection |
Troubleshooting
The tree is empty
The tree shows "No elements yet" when the file has no markup. Add some from the Add panel, or click an element in the preview.
An element in the preview has no row
The tree shows what's written in your page and its components. Elements created by JavaScript after the page loads, or by an external script, aren't in the code, so they have no row.
An action is missing from the right-click menu
Some actions don't apply to every row. For example, Add Inside… is missing on elements that can't hold children, such as images. For anything the menu doesn't cover, use Edit in code on the element's card, or switch to Code mode.
Next steps
- Design Mode and the Builder: the full visual workflow
- Data Sources: show content from your CMS and collections
- AI Assistant: ask the AI to change the page for you