Layer Manager

The SG-Builder Layer Manager — tree view of page hierarchy for selection and navigation.

Layer Manager is the alternate right-panel inspector inside the SG-Builder workspace. Where the Trait Inspector shows the selected block's traits, Layer Manager shows the page's full block hierarchy as a navigable tree. Operators use it to select deeply-nested blocks, reorder structure, and navigate complex compositions. This page is the Reference definition.

What is this for?

Read this page when you want the structural definition of the Layer Manager — what the tree shows, how selection works, and when to use it instead of canvas-click selection.

Good use cases

• You are editing a deeply-nested page and need to select a block buried inside other blocks.
• You are reorganizing the page structure and need a tree view of the existing hierarchy.
• You hit a "I cannot select this block on the canvas" question and want the model laid out.

What NOT to use this for

• Per-step procedures — open the relevant Guide.
• Trait configuration — open Trait Inspector context (right-panel default).
• Per-release shipped change — open What's New or Changelog.

How this connects to other features

• SG-Builder Overview — parent surface.
• Builder Workspace — the workspace that hosts Layer Manager.
• Editor Actions — the actions Layer Manager can drive.

Definition

Layer Manager is the tree-view inspector inside the SG-Builder right panel. It renders the page's block hierarchy as a collapsible tree. Each node represents one block; nesting reflects the parent-child structure of the page.

The defining property is structural navigation. Layer Manager is the alternative to canvas-click selection — useful when the canvas-click target is hard to reach (deeply nested, overlapping, behind another block).

Where to find it

Inside the SG-Builder workspace, the Layer Manager is in the right panel. Toggle to it using the panel icon next to the Trait Inspector tab. It activates for the page currently open in the builder.

Tree structure

Each block on the page appears as a node in the Layer Manager tree. Blocks that contain other blocks (sections, grids, columns) render as collapsible parent nodes.

Top level

Page-level blocks (hero, sections, footer-style anchors).

Nested levels

Sections contain rows; rows contain columns; columns contain content blocks (headings, paragraphs, images).

Visual hierarchy

The tree's indentation matches the page's nesting. A block selected in the tree highlights on the canvas; a block selected on the canvas highlights in the tree.

Selection model

Layer Manager click → canvas highlight

Click a node in the tree → the corresponding block highlights on the canvas + the right panel's primary view (when toggled back) shows the block's traits.

Canvas click → tree highlight

Click a block on the canvas → the corresponding tree node highlights and scrolls into view.

Bidirectional sync

The two surfaces stay in sync continuously; the operator can move between them based on which surface is easier for the current selection.

Arrangement actions

Layer Manager supports arrangement actions for the selected block.

Reorder

Drag a tree node to reorder blocks; the canvas updates immediately.

Move into / out of parent

Drag a node into a different parent to re-parent the block; useful when restructuring deep hierarchies.

Delete

Delete the selected block from the tree; the canvas reflects the removal.

Examples

Example 1 — Operator selects a deeply-nested card

The operator wants to edit a specific card inside a 3-column grid inside a section. Canvas-click works but selects the parent grid first. Switch to Layer Manager, navigate to the card node, click; the card highlights on canvas and the right panel becomes available for trait editing.

Example 2 — Operator restructures a page

The operator opens Layer Manager, drags a section from the bottom of the tree to between two earlier sections. The canvas reorders to match. The structural change happens through tree manipulation rather than canvas drag.

Example 3 — Operator removes an obsolete block

The operator selects the block in Layer Manager, deletes it. The canvas updates; the publish action ships the change.

Related reading

• SG-Builder Overview — parent surface.
• Builder Workspace — workspace that hosts Layer Manager.
• Editor Actions — actions Layer Manager can drive.

Vocabulary cross-reference

• Layer Manager is the right-panel tree-view inspector.
• Tree node is one block represented in the Layer Manager tree.
• Selection sync is the bidirectional highlight between Layer Manager and canvas.
• Re-parent is moving a block under a different parent in the tree.

Related reading