Structure Tree

The structure tree is the panel that shows the node hierarchy of the page or component you are editing. It mirrors, one-to-one, the tag tree inside your .astro file: the page root, every <div>, every component instance, every list and slot, nested exactly as they appear in the markup.

Each row in the tree is a single node. A node can be an HTML element (<section>, <div>, <h1>), a component instance (<Button>, <Hero>), a list, a <slot />, a link, or an embed. For the full set and what each one maps to in the markup, see Node Types.

Selecting a node

Click a row in the tree to select that node. Selecting does two things at once: it focuses the node on the canvas (highlighting the region it occupies) and it loads the node into the Properties Panel, where you edit its styles, props, attributes, and content.

Selection works both ways. Click an element directly on the canvas and the tree expands and highlights the matching row, so you always know where you are in the hierarchy.

How the tree maps to the markup

The tree is a live view of the structure inside your .astro file. A page like this:

<BaseLayout meta={meta}>
  <main>
    <Hero title="Welcome" />
    <section class={style({ base: { padding: "64px 0" } })}>
      <Heading size={2} text="Features" />
    </section>
  </main>
</BaseLayout>

appears in the tree as main containing a Hero instance and a section, with Heading nested inside the section. Reordering, nesting, or deleting nodes in the tree rewrites the corresponding tags in the file, and hand-editing the file updates the tree on the next save. The two stay in sync through the meno-astro codec, so you can move freely between visual edits and hand-editing.

Reordering and nesting

Drag a row up or down to reorder it among its siblings; the node keeps its nesting level. Drag a row onto another node to nest it inside that node as a child. This is how you wrap content into a container, move a card between sections, or pull an element out one level — all without touching the markup.

Expand or collapse any node with the arrow on its row to focus on the part of the tree you are working in.

Labels

By default each row shows its tag name (div, section, h1) or component name (Button, Hero). You can give any node a custom label from the Properties Panel to make a deep tree easier to scan — Header > Nav > Links reads far better than div > div > div. Labels are editor metadata only; they have no effect on the rendered HTML or the tags in your .astro file.

Drilling into a component

A component instance like <Hero /> shows in the tree as a single row, because its internals live in another file (src/components/Hero.astro). To edit those internals, drill into the instance. The tree then shows the component's own node tree — its elements, nested instances, and <slot /> markers.

Keep in mind the scope of what you change:

• Editing prop values on the instance (in the Properties Panel) affects only that one placement.

• Editing the structure or styles inside the component definition affects every instance of that component, everywhere it is used.

So change a heading's text on the instance, but change its padding inside the component definition. You can drill through several levels of nested components and step back out the way you came in. For how props flow into a component, see Component Props.

Deleting

Delete a node to remove it and all of its children from the page. As with every structural change, deleting is reflected immediately in the underlying .astro markup.

Next, learn how to style and configure the node you have selected in the Properties Panel, or get the full picture of the workspace in the Editor Overview.