Select and edit components

Selecting a component connects the canvas, Tree, and the right-hand Main / Style / Actions / Rules tabs.

Select on the canvas

1. Click a field, button, or container outline.
2. A selection frame appears. The right panel loads that component’s properties.

Select in Tree

1. Open Tree → Expand all if needed.
2. Click the component row.
3. The canvas scrolls to the same selection.

Edit properties

1. With a component selected, use Main for labels, keys, and defaults.
2. Use Style for layout and CSS-related options exposed to authors.
3. Use Actions and Rules on buttons and inputs as needed.

Multi-select

1. Hold Ctrl (Windows/Linux) or ⌘ (macOS), then click several components on the canvas or in Tree.
2. Hold Shift, then click in Tree to select a range.
3. Press Delete to remove all selected items. Cloning applies to a single selection with Ctrl+D or ⌘+D.

See Canvas drag and drop for reordering.

Duplicate a component

1. Select exactly one component.
2. Click the clone icon on the floating toolbar, or press Ctrl+D (Windows/Linux) or ⌘+D (macOS).
3. A copy appears. Adjust Key on Main so data keys stay unique.

Click the page background first if the shortcut does nothing; the shortcut may not work while focus is inside a text field.

Delete a component

1. Select one or more components.
2. Click the delete icon on the floating toolbar, or press Delete.
3. Confirm the field is gone from Tree.

Summary

Canvas or Tree selection drives the right panel. Ctrl+D or ⌘+D duplicates. Delete removes. See Keyboard shortcuts for the full list.

See also

• Use the component tree
• Use the right properties panel
• Add components from the palette