Page builder
Build storefront pages with a drag-and-drop block editor in an immersive 3-pane shell.
The page builder is an immersive, full-screen editor with a component tree on the left, a live preview in the center, and a properties panel on the right.
Opening the builder
From the pages table, click Edit on any page. You'll enter the immersive editor at /admin/storefront/pages/[id], which hides the admin sidebar for maximum space.
The three panes
| Field | Type | Description |
|---|---|---|
| Component tree | left pane (280px) | A nested tree of blocks on the page. Drag to reorder, expand/collapse nesting, and select a block to edit its properties. |
| Live preview | center pane | A real-time render of the page using BlockRenderer. Changes in the tree or properties reflect here instantly. |
| Properties | right pane (320px) | Context-aware fields for the selected block — text, images, colors, links, product collection, etc. |
Adding blocks
Open the component catalog sheet to browse and insert blocks. Blocks include hero sections, product grids, featured products, text, images, buttons, newsletters, and more. Each block has a type and a props object stored as {id, type, props}[].
Mobile behavior
On smaller screens, the three panes collapse into a bottom tab navigation with bottom-sheet drawers for the tree and properties, keeping the preview visible.
Syncing to live