Adding & arranging blocks

A page is a stack of blocks. Add them, reorder them, nest them.

The Blocks panel

Open the Blocks tab on the left rail (or press the ”+” bar on the canvas). You’ll see every block your app has defined, grouped into folders or categories.

• Search — type to filter by name, description, or tags.
• Click a block to insert it at the end of the document — or at the current insertion point if one is active.
• Drag a block directly onto the canvas to place it exactly where you want.

Drag and drop

• Drag from the Blocks panel → the canvas to insert.
• Drag a block within the canvas to reorder.
• Drop a block into a slot (any container-style block) to nest it inside.

Visual drop indicators show where the block will land. If a slot rejects the block type (because of allow / disallow rules), the drop indicator won’t appear.

The Layers tree

The Layers tab on the left rail shows the entire document as a hierarchical tree. Use it when:

• The page is long and you want to jump to a specific block.
• You need to see what’s nested inside what.
• You want to drag-and-drop across long distances (Layers is faster than scrolling).

Each row shows:

• The block’s icon and label
• A short summary (e.g. for a Hero, the headline text)
• Expand / collapse arrows for blocks with slots

Click a row to select; click the chevron to expand nested content.

Nesting (slots)

Some blocks have slots — drop zones that can contain other blocks. A Container, Grid, or Columns block typically has one or more slots.

To drop into a slot:

1. Hover over the parent block until you see its slot area highlighted.
2. Drop — either from the Blocks panel or from another position on the canvas.

Nested blocks behave exactly like top-level ones: edit them, duplicate them, reorder within their parent.

Drilling in

When you select a block inside an array field or a slot, the Edit panel on the right shows a breadcrumb at the top (e.g. Page → Features → Card 2). Click a crumb to jump back up the tree.

Duplicating & deleting

• Duplicate — select a block, press ⌘/Ctrl+D, or use the toolbar button. The copy is inserted directly below, including any nested content.
• Delete — select and press Delete or Backspace. Undo with ⌘/Ctrl+Z.

Moving with the keyboard

• Alt+↑ / Alt+↓ — move the selected block within its parent.
• ↑ / ↓ — select the next / previous sibling (without moving).

Moves are captured in the undo stack, so you can always reverse an accidental reorder.