Arrange components on the canvas

Insert, select, resize, duplicate, and move components with pointer or keyboard.

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.

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 for precise nesting, Containers for slot rules, and Properties for regions and configuration.