Builder Workspace
| Field | Value |
|---|---|
| Audience | public |
| Page type | reference |
| Area | sg-builder |
| Updated | 2026-05-14 |
The SG-Builder workspace — canvas, side panels, breakpoint switcher, action bar.
The Builder Workspace is the editor shell that hosts every SG-Builder editing session. It combines the canvas (where the page renders for editing), the side panels (block library and trait inspector), the breakpoint switcher (responsive viewport control), and the action bar (where the publish action lives). This page is the Reference definition.
What is this for?
Read this page when you want the structural definition of the workspace shell — what each region does and how the operator moves between them during an editing session.
Good use cases
- You are new to SG-Builder and want to understand the workspace layout.
- You are explaining to a stakeholder how the editor is organized.
- You hit a "where is the trait panel?" question and want the model laid out.
What NOT to use this for
- Step-by-step procedures — open the relevant Guide.
- Per-component capability detail — open the corresponding Component Reference.
- Per-release shipped change — open What's New or Changelog.
How this connects to other features
- SG-Builder Overview — parent surface.
- Editor Actions — actions available within the workspace.
- Layer Manager — sub-panel for navigating page structure.
- Responsive Preview — breakpoint-switching sub-page.
- Publish Changes — the publish action that lives in the action bar.
Definition
The Builder Workspace is the SG-Builder editor's shell. It contains three primary regions: canvas (page render), side panel (tabbed inspector — Block library, Trait inspector, Layer Manager, Style Manager, Settings), top action bar (breakpoint switcher + publish). The side panel switches between the block library and the per-block inspectors via its tab strip.
The defining property is integrated. The three regions work together — selecting a block on the canvas switches the side panel to the Trait inspector tab; switching breakpoint updates the canvas; clicking publish in the action bar transitions the page state.
Purpose
The purpose of this page is to define the workspace shell as a Reference layer. It explains the four regions, how they relate, and how the operator moves between them.
Scope
This page covers the Builder Workspace at the Reference level.
The page covers:
- The four primary regions.
- The tabbed inspectors inside the side panel.
- The action bar's role as the publish surface.
- The boundary against per-component detail.
- Per-component capability detail — Component References.
- Per-step editing procedures — Guides.
- Per-release shipped change — What's New or Changelog.
The four regions
Canvas
The center region renders the page being edited. Operators interact directly with the canvas — clicking blocks selects them; dragging from the block library adds new blocks; dragging existing blocks rearranges them.
Left panel — Block library
Lists the blocks the operator can drag onto the canvas. Categorized by block family (basic, posts, ecommerce, extra).
Right panel — Trait inspector
When a block is selected, the side panel switches to its Trait inspector tab and shows that block's traits — layout, decoration, content, behavior, responsive overrides. The Trait inspector is the configuration surface for the selected block.
Top action bar
Hosts the breakpoint switcher (1920 / 1199 / 991 / 767 / 575 / 480), the page-level navigation (back to record via the Menu hamburger), and the publish action. The publish button carries the page's current draft state — its indicator changes as you save and publish.
Welcome
Sub-panels in the right region
The side panel hosts alternate inspectors via its tab strip.
Layer Manager
Tree view of the page's block hierarchy. Click into a block in the tree to select it on the canvas.
Style Manager
Per-block style overrides — typography, color, spacing, decoration. Layered on top of theme defaults.
Page Settings
Per-page configuration that applies at the page level rather than per-block — page title, meta, route.
Constraints and boundaries
The Builder Workspace is a Reference area for the editor shell.
Use this Reference for:
- Understanding the workspace layout.
- Confirming what each region does.
- Per-component detail — Component References.
- Per-step editing procedures — Guides.
- Per-release shipped change — What's New or Changelog.
Public boundary
This page is intentionally public-safe.
Examples
Example 1 — Operator composes a hero on a new page
The operator opens the page in SG-Builder. The workspace loads with empty canvas. They drag Hero from the Block library tab of the side panel to the canvas. The hero appears; the side panel switches to the Trait inspector tab showing the hero's traits. They edit the heading text in the Trait inspector, switch to the 991 breakpoint via the action bar, tune the responsive heading size, click publish.
Example 2 — Operator switches to Layer Manager for nested navigation
The page has a deeply nested structure. The operator switches the side panel to the Layer Manager tab, navigates the tree to the specific deeply-nested block they need to edit, selects it. The canvas highlights the selection.
Example 3 — Stakeholder asks "where is the editor?"
The operator opens SG-Builder on any page; the workspace shell appears identically every time. The Reference grounds the conversation in the editor's predictable layout.
Documentation guidance
Use this page as the structural definition for the workspace shell. Per-step procedures live in Guides; per-component detail lives in Component References.
Reading order
Open this page when scoping the editor experience. Pair with Editor Actions for the per-action detail and Responsive Preview for the breakpoint switcher.
Related reading
- SG-Builder Overview — parent surface.
- Editor Actions — actions inside the workspace.
- Layer Manager — alternate right-panel inspector.
- Responsive Preview — breakpoint switcher.
- Publish Changes — publish action.
Vocabulary cross-reference
- Workspace is the editor shell that contains all four regions.
- Canvas is the center region where the page renders.
- Block library is the side panel's Block library tab — the source of draggable blocks.
- Trait inspector is the side panel's per-block configuration tab — the view that appears when a block is selected.
- Side panel is the single tabbed surface on the right of the canvas that hosts Block library, Trait inspector, Layer Manager, Style Manager, and Settings (one panel, multiple tabs).
- Action bar is the top region hosting breakpoint switcher + publish.
Maintenance discipline
When the workspace layout changes across releases (new region, new sub-panel, new action), update this Reference and log the change in Changelog.
Related reading
| Topic |
|---|
| SG-Builder |
| Editor Actions |
| Layer Manager |
| Responsive Preview |
| Publish Changes |