The Editor
Layers & structure
Use the Layers panel to see your page as a tree, select hard-to-click elements, reorder and nest them, and hide or lock what you're not working on.
Last updated 2026-06-29
Every web page is a set of nested boxes: a section contains a row, the row contains a card, the card contains a heading and a button. The Layers panel shows that structure as a tree, which makes it easy to select, reorder, and organize elements — especially ones that are awkward to click on the canvas.
Open it from the Layers tab in the left panel, or press Ctrl/Cmd + Shift + L.
Reading the tree
Each row in the tree is one element. The indentation shows nesting — children sit underneath and slightly to the right of their parent.
- Click the disclosure triangle to expand or collapse an element's children.
- Use Expand / collapse all to open or close the whole tree at once.
- The Search layers… box filters the tree by name, so you can jump to "Hero" or "Footer" instantly.
Select, rename, reorder
| Action | How |
|---|---|
| Select | Click a row. The element highlights on the canvas and the right panel updates. |
| Rename | Double-click the name and type a clearer one (like "Pricing section"). Good names make the tree easy to scan. |
| Reorder | Drag a row up or down to change the order on the page. |
| Nest | Drag a row onto another element to move it inside that container. Drag it out to un-nest. |
| Delete | Select a row and press Delete, or use the right-click menu. |
Naming and nesting in the Layers panel is the most reliable way to build a tidy page. If something is hard to grab on the canvas — a thin divider, an empty container — find it here instead.
Hide and lock
Each row has two toggles:
- Eye (visibility) — hide an element on the canvas while you work on something behind or around it. This is an editing convenience; to control whether an element shows on phones versus desktops on your published site, use the Visibility property instead (see Component properties & traits).
- Lock — lock an element so you can't accidentally select or move it on the canvas. You can still select it from the tree. Handy once a section is finished.
Where to go next
- Selecting & moving elements — the canvas side of the same job.
- Symbols — turn a branch of the tree into a reusable component.