Structure Tree

On the right side of the Editor you will see the Structure Tree. If you select an element, the preview scrolls to that component. The same works in reverse -- click on an element in the preview and it gets selected in the tree.

Tree Layout

The tree starts with the page root and nests downward. Each row shows:

• An icon indicating the node type

• A label (custom name or the HTML tag)

• An expand/collapse arrow for nodes that have children

page
  header
    nav
      Logo (component)
      NavLinks (component)
  main
    Hero Section
      h1
      p
      Button (component)
    Features
      ...
  footer
    ...

Node Types and Icons

In the tree you will notice different types of icons. Components show an icon with four squares, while regular nodes show a hexagon icon. You can edit the tag of a regular element directly in the tree -- it can be a div, span, p, h1, or any HTML tag you need.

Selecting Elements

Click a row in the tree to select that element. The canvas scrolls to it and highlights it.

You can also select elements by clicking directly on the canvas. The tree auto-expands to reveal the selected node.

Keyboard Navigation

Use the arrow keys to navigate between nodes in the tree:

These shortcuts work whenever the canvas or tree has focus and you are not typing in an input field.

Expanding and Collapsing

Click the arrow icon next to any node to expand or collapse its children. You can also use Arrow Left and Arrow Right keys.

Expanding a node reveals its children. Collapsing hides them. The expansion state persists as you navigate between elements but resets when you switch pages.

Reordering Elements

To move an element from one position to another, use drag and drop or keyboard shortcuts. Regular brackets move it between siblings. Shift plus bracket moves the element to a different level in the tree hierarchy.

Move Up / Move Down

Reorder an element among its siblings:

The element stays at the same nesting level. If it is already first or last among its siblings, nothing happens.

Nest Into Sibling

Move an element one level deeper by nesting it into an adjacent sibling:

This is useful for wrapping content into containers without creating intermediate elements.

Wrap and Unwrap

For more structural changes, use the Command Palette (Cmd+E):

• Add Parent (Wrap) -- wraps the selected element in a new div, making it a child of that new container

• Unwrap Parent -- removes the parent element and promotes its children up one level

Labels

By default, tree nodes show their HTML tag (div, h1, img) or component name (Button, Hero). You can assign a custom label to any element for easier identification.

You can rename a node to make your structure easier to read. The label appears in the tree in place of the tag name:

page
  header
    nav
      Logo (component)        <-- component name
  main
    Hero Section               <-- custom label on a div
      h1
      Call To Action           <-- custom label on a component

Labels are stored in the JSON page data and have no effect on the HTML output.

Hovering

As you move the mouse over rows in the tree, a hover highlight appears. The corresponding element on the canvas also gets a subtle outline, showing exactly which visual region that node occupies. This hover preview works in both directions -- hovering on the canvas highlights the tree row too.

Hover feedback is especially helpful when you have several adjacent elements with similar tags and need to identify which tree row corresponds to which visual element.

Copy and Paste

You can duplicate elements or move them between pages using copy and paste:

Paste inserts the copied element tree as a new sibling. All styles, attributes, children, and nested components are preserved in the copy. You can copy an element on one page, navigate to a different page, and paste it there.

Copy and paste are also available in the right-click context menu and the Command Palette.

Undo and Redo

Every structural change -- adding, deleting, moving, nesting, wrapping, unwrapping -- is recorded in the undo history.

The undo history is per-page. Switching pages does not clear it, but closing the editor does.

Right-Click Context Menu

Right-click any node in the tree to open a context menu with structural commands:

All of these commands are also available in the Command Palette (Cmd+E).

Component Navigation

Double-click on the canvas or on an item in the tree to open component editing. This lets you navigate into components that are nested inside one another.

When editing a component definition, changes apply to every instance of that component across all pages. The toolbar indicates you are inside a component by showing its name.

If you navigate out of a component, you can see that other components are placed inside it via slots. Slots mark where parent content gets inserted.

Nested Component Editing

Components can contain other component instances. Keep pressing Enter to navigate deeper into nested components. Press Escape or Shift to go back one level.

Component vs. Instance Changes

It is important to understand the distinction:

If you want to change a button's text on one page, edit the prop value at the instance level. If you want to change the button's padding everywhere, press Enter and edit the style in the component definition.

Tips

• Use labels generously on container div elements. A tree full of div > div > div is hard to scan, but Header > Nav > Links is clear.

• The [ and ] keys let you quickly reorder list items, grid cells, or any sibling group without leaving the keyboard.

• Nesting with { and } is faster than wrap-then-move when you need to group existing elements into a new container.

• XRay mode (press X) helps identify elements on the canvas that are hard to click, like empty containers or overlapping layers.

Next Steps

• Properties Panel -- edit the selected element's styles, attributes, and content

• Command Palette -- all structural commands searchable in one place

• Keyboard Shortcuts -- complete shortcut reference

• Overview -- return to the full editor layout