Layers
The Layers panel shows your app's DOM structure as a navigable tree. Select deeply nested elements, reorder with drag-and-drop, and insert blocks at specific positions.
Accessing the Layers panel
Click the Layers tab in the left panel sidebar (first icon). The panel shows a tree view of the current page's DOM, rooted at <body>.
Tree structure
The tree mirrors the live DOM:
- HTML elements show their tag name (
div,section,h1,img, etc.) - Components show their component name when available
- Nesting is shown by indentation
- Collapse/expand: Click the arrow next to containers to show or hide children
The tree updates in real time as you make changes from the canvas, code editor, or AI chat.
Selecting elements
Click any node in the tree to select it on the canvas. Selection is bidirectional:
- Layers to canvas: Clicking a node highlights and scrolls to the element on the canvas
- Canvas to layers: Selecting on the canvas highlights and scrolls to the node in the tree
This makes it easy to reach deeply nested elements that are hard to click directly on the canvas.
Drag-and-drop reordering
Rearrange elements by dragging nodes:
- Click and hold a node
- Drag to a new position (a drop indicator shows where it will land)
- Release to move
Rules
- Elements can only drop into valid containers
<body>and<main>cannot be dragged- You can reorder within the same parent or move to a different parent
- Dragging updates the source code automatically
Block inserter integration
Between every pair of siblings in the tree, a + button appears on hover. Click it to open the Block Inserter targeted to that exact position.
Useful for:
- Adding sections between existing ones
- Inserting a component into a specific layout slot
- Building up a page piece by piece
Filtering and search
For large pages, the tree focuses on the most relevant elements:
- Elements within
<main>are the primary focus - Framework wrapper elements can be collapsed
- The tree scrolls to the selected element when you click on the canvas
Element context
Each node shows:
- Tag name: The HTML element type
- Component name: When it maps to a React component
- Visual indicators: Icons or badges for element type
- Selection state: Highlighted background when selected
Interactions
Beyond selection and dragging:
- Hover to highlight: Hovering a node highlights the element on the canvas
- Right-click menu: Same context menu as the canvas (copy, delete, group, navigate to code)
- Double-click: Enter text editing for text elements, or expand/collapse containers
Tips
- Use layers for precision: When elements overlap or are too small to click on the canvas, select from the tree.
- Use the + buttons: Most precise way to insert content at a specific position.
- Collapse what you're not working on: Keep the tree manageable.
- Watch the tree during builds: It updates in real time as the AI makes changes, showing the structural view of modifications.