Layer Manager

The Layer Manager provides a tree-structured view of your document layout hierarchy. It is essential for navigating deeply nested components, organizing flexbox rows, and managing complex layouts that are difficult to select directly on the visual canvas.

---

Hierarchy Tree View

The tree displays parent-child relationships across all document elements starting from the root Body container down through individual columns, rows, logic blocks, and content nodes.

• Expand / Collapse: Click the arrows (>) next to parent containers (such as Row, Condition, or Collection) to reveal or hide nested items.
• Node Labels: Displays clear indicators for structural types (e.g., Body, Row, Column, Condition, True, False, Collection, Item).

---

Core Features

1. Precise Selection

On complex documents, overlaid or small elements can be tricky to click on the canvas. Clicking any layer entry in the Layer Manager selects that exact component on the canvas and opens its properties in the right inspector panel immediately.

2. Element Reordering & Drag-and-Drop

You can rearrange the rendering order of elements directly inside the tree:

• Drag and drop any node up or down within its parent container.
• Move elements into or out of dynamic wrappers (such as shifting an element into a True condition branch or a Collection item template).

3. Hiding Components (Visibility)

Hover over any element in the layer tree to toggle its visibility icon:

• Hidden elements remain part of the document template structural schema but are suppressed during preview and rendering.
• Ideal for temporarily isolating components during design iterations.

4. Locking Components

Lock elements in place to prevent accidental movement, deletion, or modification while working on adjacent layout elements:

• Locked elements cannot be moved or modified on the canvas until explicitly unlocked via the Layer Manager.
• Useful for securing complex multi-column grid layouts and fixed headers/footers.