ObjectStackPage Builder
Page Builder protocol schemas
@module studio/page-builder
Studio Page Builder Protocol
Defines the specification for the drag-and-drop Page Builder UI.
The builder allows visual composition of blank pages by placing
elements on a grid canvas with snapping, alignment, and layer ordering.
Source: packages/spec/src/studio/page-builder.zod.ts
TypeScript Usage
import { CanvasSnapSettings, CanvasZoomSettings, ElementPaletteItem, InterfaceBuilderConfig, PageBuilderConfig } from '@objectstack/spec/studio';
import type { CanvasSnapSettings, CanvasZoomSettings, ElementPaletteItem, InterfaceBuilderConfig, PageBuilderConfig } from '@objectstack/spec/studio';
// Validate data
const result = CanvasSnapSettings.parse(data);CanvasSnapSettings
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| enabled | boolean | ✅ | Enable snap-to-grid |
| gridSize | integer | ✅ | Snap grid size in pixels |
| showGrid | boolean | ✅ | Show grid overlay on canvas |
| showGuides | boolean | ✅ | Show alignment guides when dragging |
CanvasZoomSettings
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| min | number | ✅ | Minimum zoom level |
| max | number | ✅ | Maximum zoom level |
| default | number | ✅ | Default zoom level |
| step | number | ✅ | Zoom step increment |
ElementPaletteItem
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| type | string | ✅ | Component type (e.g. "element:button", "element:text") |
| label | string | ✅ | Display label in palette |
| icon | string | optional | Icon name for palette display |
| category | Enum<'content' | 'interactive' | 'data' | 'layout'> | ✅ | Palette category grouping |
| defaultWidth | integer | ✅ | Default width in grid columns |
| defaultHeight | integer | ✅ | Default height in grid rows |
InterfaceBuilderConfig
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| snap | Object | optional | Canvas snap settings |
| zoom | Object | optional | Canvas zoom settings |
| palette | Object[] | optional | Custom element palette (defaults to all registered elements) |
| showLayerPanel | boolean | ✅ | Show layer ordering panel |
| showPropertyPanel | boolean | ✅ | Show property inspector panel |
| undoLimit | integer | ✅ | Maximum undo history steps |
PageBuilderConfig
Properties
| Property | Type | Required | Description |
|---|---|---|---|
| snap | Object | optional | Canvas snap settings |
| zoom | Object | optional | Canvas zoom settings |
| palette | Object[] | optional | Custom element palette (defaults to all registered elements) |
| showLayerPanel | boolean | ✅ | Show layer ordering panel |
| showPropertyPanel | boolean | ✅ | Show property inspector panel |
| undoLimit | integer | ✅ | Maximum undo history steps |