Organize the component outline

Inspect nesting, move components between slots, and remove complete groups.

Outline shows the app as a component tree. It is especially useful when items overlap visually, sit inside containers, occupy inactive tabs, or are hidden by a condition.

Select an item

Open Outline and choose a component row. The row identifies its id and type, and selection updates the Properties view. Containers expose their slots as separate rows, including empty slots where you can place content.

The outline reflects layout relationships. The definition stores components as a list whose parent and slot determine the tree, so order within each parent/slot matters even when it is edited visually.

Move

Use the up/down controls to reorder siblings. Drag a component onto an appropriate slot, place it relative to another row, or use Move to… on the selected component to choose an eligible container slot. Choose Top level when it should no longer be nested.

Moving a container moves its subtree with it. Children inherit the region of their container's root; they cannot independently declare a conflicting region while nested. Move the item to the top level if it needs a different region.

Strive refuses moves that create a cycle, use a non-container as parent, name an invalid slot, or exceed the four-level container nesting cap. The refusal explains the problem and leaves the existing tree unchanged. Moving an item into itself or one of its descendants cannot create a valid hierarchy.

Remove

Choose the row's remove action to delete a component. Removing a container removes everything nested inside it. Use Undo immediately if the whole group was not meant to be removed.

Removal does not automatically redesign every expression that mentioned the component. Inspect diagnostics, event targets, visibility expressions, and data bindings after structural changes. A valid tree can still contain a broken expression if a referenced id disappeared.

Choose the right tool

Use Canvas for visual proportions and Outline for exact hierarchy and placement. The two operate on the same document; a change in one appears in the other and in Preview.

See Containers and slots, Canvas, and Save validation.