---
title: Page Builder
description: Page Builder protocol schemas
---

{/* ⚠️  AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs go in content/docs/guides/. */}

@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.

<Callout type="info">
**Source:** `packages/spec/src/studio/page-builder.zod.ts`
</Callout>

## TypeScript Usage

```typescript
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 |


---

