The Layers Tree displays the full structural hierarchy of the currently open Layout file. Each Layout defines a single UI composition, made up of multiple Layers that represent every visual or logical element in the Canvas.

The Layers Tree serves as both a navigator and an editor for these elements, allowing users to organize, select, and manipulate the relationships between layers.

Here’s an example of what the Layers Tree might look like in one of your Layouts:

Hierarchy #

Each entry in the tree represents a Layer. Layers are organized hierarchically to show parent–child relationships.

• Indentation represents hierarchy depth:
  • The furthest-left Layers are parents.
  • Each subsequent indent level represents children of the Layer above.
• Placement:
  • Children are positioned based on their alignment setting, relative to their parent’s XY coordinates and area.
• Parent Types:
  • Only certain Layer types can contain children:
    • Group Layers
    • Stack Layers
    • Grid Layers

Siblings #

All Layers on the same level within their parent are considered “siblings”.

Sibling Order: #

• The order of sibling Layers in the Layers Tree determines how they are arranged within their parent.
• Layers lower in the tree list appear earlier within the parent typically at the end (left or top), depending on the parent Layer’s orientation.
• Layers at the top of the tree list appear last (bottom or right) within their parent Layer.
  • These Layers also appear in front of siblings lower than them in the Layers Tree.

Sibling Draw Order: #

Observe these Layers in the Layout Canvas:

In the Layers Tree, it can be seen that they are siblings and the text is drawn in front of the circle shaped Layers.

Once we swap the text Layer down, the draw order swaps as well:

Selection #

Only one Layer can be selected at a time.

Selecting a Layer:

• Highlights it in the Layers Tree.
• Displays its specific properties in the Property Editor panel.

When a Layer is selected, the Layout itself is not considered selected but remains open and visible in the Central Panel.

Layer selection has a shared behavior and visual with the Layout Editor Canvas, where the selected Layer will be highlighted in both the Layers Tree and Canvas.

Tree Controls #

The section at the bottom of the Layers Tree contains various controls for adjusting Layers.

They are associated with letters in the following image:

New Group Button (A): #

This button will create a new Group Layer at the top-level of the Layers Tree.

Remove Layer Button (B): #

This button will remove the selected Layer.

This button is only enabled when there is a selected Layer.

Swap Layer Back Button (C): #

This button will swap a Layer with its previous sibling.

This button is only enabled when the Layer has a previous sibling.

See the Siblings section.

Swap Layer Forward Button (D): #

This button will swap a Layer with the next sibling.

This button is only enabled when the Layer has a next sibling.

See the Siblings section.

Controls #

Drag & Drop #

• Layers can be dragged and dropped one at a time.
• Dragging a Layer automatically includes all of its children.
• Drop behaviors:
  • Onto a parent Layer:
    • Adds the dragged Layer to the front (top) of that parent’s list of children.
  • Onto a Layer with no children:
    • Inserts the dragged Layer in front of it (as a sibling).
  • Onto empty space at the top of the tree:
    • Moves the Layer to the top-level of the Layout.
• Note: Dragging does not modify the Layer’s existing XY position values. As a result, visual placement on the Canvas may shift unexpectedly depending on the new parent’s alignment.

Remove Layers #

Removing a Layer will delete the selected Layer and all of its children from the Layout.

Layers can be removed by:

• Right-click a Layer to open a context menu and select the “Remove” option.
• Press the Delete key on your keyboard to remove the selected Layer.
• Press the Remove Layer Button in the Tree Controls at the bottom of the Layers Tree panel to remove the selected Layer.

Context Menu #

Right-click a layer to open a menu with:

• Copy
• Paste
• Remove

Copy / Paste #

Copy: #

• On your keyboard, Ctrl + C:
  • Copies the selected Layer, including:
    • Its properties.
    • All children and their properties.

Paste: #

• On your keyboard, Ctrl + V:
  • Pastes the copied Layer as a new instance:
    • Onto a parent Layer:
      • Adds the copied Layer to the front (top) of that parent’s list of children.
    • Onto a Layer with no children:
      • Inserts the copied Layer in front of it (as a sibling).