Layers panel

The Layers tab in the editor's side panel shows the page you're editing as an element tree: the same page you see on the canvas, but as a browsable outline. Hover a row and the matching element lights up on the canvas; click a row and it's selected, exactly as if you had clicked the element itself.

Why a tree, when you can click the page?

Because some elements can't be clicked. Clicking on the canvas selects whatever the browser hit-tests under your cursor, and plenty of real-page elements never win that test:

Click-transparent elements: anything styled pointer-events: none (decorative ribbons, watermark overlays) lets every click pass straight through to whatever is underneath.
Fully overlapped elements: an element sitting entirely behind another (a background layer under a hero, a slide behind the active one) can never be the click target.
Hover-only and hidden elements: dropdown menus, tooltips, and anything currently display: none aren't on screen to click at all.

The Layers tree lists every element regardless. Selecting a row goes through the exact same selection pipeline as a canvas click, with no hit-testing involved, so once it's selected you edit it like any other element: styles, visibility, attributes, all of it.

Rather than hiding awkward elements, the tree badges them:

hidden: the element is currently not rendered (for example display: none).
no-pointer: the element is click-transparent on the page (pointer-events: none); the tree is the way to select it.
shadow: the element hosts a shadow root (a closed-off subtree some widgets use).

Reading the tree

Open the Layers tab (next to Changes and Accessibility in the side panel). While the editor reads the page you'll briefly see "Reading the page structure…", then the top-level elements of the page appear.

Each row shows the element's tag plus its #id and first class name when it has them, enough to recognise div #hero .banner at a glance.
Rows with children carry a chevron. The tree loads lazily: expanding a row fetches its children on demand, so even very large pages stay fast.
Hover a row to flash a highlight over the matching element on the canvas, confirming you have the right one before you click.
Click a row to select the element. The panel slides to the Inspector with that element loaded.

The tree keeps itself current: if the page re-renders (a carousel advancing, content loading in), the outline refreshes automatically.

Searching for an element

The search box at the top of the Layers tab ("Search elements: tag or text") finds elements anywhere on the page, no expanding required. Type a tag name (button), or a fragment of the element's visible text (free trial), and matching elements are listed with their tag. Click a result to select it, exactly like clicking a tree row. If nothing matches, the panel says so rather than showing an empty void.

Reveal in Layers

The reverse direction works too. With an element selected, the Inspector's header has a Reveal in Layers button: it slides the Layers tab in, expands the tree along the element's ancestor path, and scrolls its row into view, without dropping your selection. Use it to orient yourself ("where exactly does this sit in the page?") or as a springboard to select a nearby sibling or parent. Clicking any row or search result exits the peek and selects normally.

With the tree focused:

Key	Action
`↑` / `↓`	Move focus up / down the visible rows.
`→`	Expand the focused row (or step to the next row if it's already expanded).
`←`	Collapse the focused row.
`Enter` / `Space`	Select the focused element.

When the tree isn't available

On rare pages the editor can't read the page structure at all: the read times out or the page actively interferes. The tab says "Layers aren't available for this page yet. Click elements on the canvas to select them instead." The search box above it, canvas clicking, and the rest of the editor keep working as normal. Overlay mode (pages that block framing) is not one of these cases: there the tree reads the live page directly, so Layers stays available.

Editing toolkit: what you can do with the element once it's selected.
Selectors: how a selected element is matched again on every page load.
Interaction & record mode: the other route to hover-only elements: record the interaction that reveals them, then edit in place.