# Arrange components on the canvas

Use **Canvas → Edit** to arrange the app. Insert creates components; selecting a block exposes quick actions and its Properties. **Interact** lets you try supported component behavior instead of arranging the layout.

## Insert and select

Open **Insert**, search components by their purpose, and click a matching entry or drag it to the canvas. Each entry describes what it does. Select a block to work on that component; choose **Properties** in its quick actions to focus its controls.

For supported inline text blocks, open the inline editor using the block's editing gesture or Enter and change the literal text. Dynamic properties are best edited as bindings in Properties so the intended expression stays clear.

## Arrange

The quick-action toolbar moves a selected block up or down, narrows or widens it in the main grid, moves it between the main and side regions, duplicates it, deletes it, and opens Properties. The main region uses 12 columns; **Span** controls how many a component occupies.

| Keyboard shortcut | Action on the selected block |
| --- | --- |
| Alt + Up / Down | Move among siblings in the same region or container slot. |
| Alt + Left / Right | Narrow or widen by one main-grid column. |
| Alt + Shift + Left | Move to the main region. |
| Alt + Shift + Right | Move to the side panel. |

A nested block moved to a root region leaves its container. Moving within a slot does not jump across container boundaries. At a boundary, the builder reports the refusal and leaves the layout unchanged.

## Duplicate and delete carefully

Duplicate makes a new component with a fresh id and copies its properties and event actions. Copied action references still point to the original targets; inspect them before expecting an independent interaction. Duplicating one container is not a promise to clone its whole nested tree.

Deleting a container removes its nested subtree. One Undo restores that removal. After removing a component, check other bindings and actions for references to its old id.

Use [Outline](/docs/builder/outline) for precise nesting, [Containers](/docs/builder/containers) for slot rules, and [Properties](/docs/builder/properties) for regions and configuration.