Outline pane

The Outline pane gives you a bird’s-eye view of your page’s HTML structure as a collapsible tree. It is the fastest way to select deeply nested elements, reorganize the DOM, and understand how your layout is built.

Reading the tree

Every row in the tree represents one HTML element. The tree mirrors the DOM exactly — what you see here is the real structure of your page’s markup.

Indentation indicates nesting. A row indented beneath another is a child of that element. The more indentation, the deeper the nesting level.

Each row shows:

• Element icon — A small icon indicates the element type (see Element type icons below).
• Tag name — The HTML tag (e.g., div, section, img).
• Class or ID — The first class or ID applied to the element, shown in muted text for quick identification.

Selecting elements

Click any row in the Outline pane to select that element. The canvas will highlight the element with a blue selection border and scroll it into view if it is off-screen.

Conversely, clicking an element on the canvas will highlight its corresponding row in the Outline pane and scroll the tree to show it.

Expanding and collapsing branches

• Click the arrow icon to the left of a row to expand or collapse its children.
• Alt + click the arrow to expand or collapse the entire subtree at once.
• Elements with no children show no arrow.

The tree remembers which branches are open as you work.

Dragging to restructure

You can reorganize the DOM by dragging rows in the Outline pane — no need to cut and paste elements on the canvas.

To move an element:

1. Hover the row you want to move — a drag handle (⠿) appears on the left.
2. Click and drag the row to a new position.
3. A blue insertion line shows where the element will land when you release:
   • A line between rows inserts the element as a sibling.
   • A line inside a row (with indentation) drops the element as a child.

Element type icons

The icon at the start of each row tells you what kind of element it is at a glance: