Page Builder

Overview

The Page Builder is Cmssy's visual editor for composing pages from blocks. Cmssy is a headless CMS: you build block components in your own Next.js (App Router) app with @cmssy/react + @cmssy/next and deploy that site yourself. The editor frames your deployed site in an iframe (your workspace Preview URL + ?cmssyEdit=1) and drives it over a postMessage bridge — so you drag, click, and edit on the real site. When you publish, the content becomes the published version served by the delivery API, which your site renders.

Layout

The editor is split into five zones:

• Top bar — page title, Draft badge (for unpublished changes), Undo/Redo buttons, language switcher, and a three-dot menu with page actions (Publish, Revert, Preview, etc.).
• Left sidebar — your workspace's page tree. Click a page to open it. Drag pages to reorder. Resizable (256-512 px).
• Right drawer (Block Library) — catalogue of the blocks you've registered with defineBlock in your app, grouped by category. The editor learns each block's schema over the SDK bridge. Drag from here onto the canvas to add.
• Canvas — your real deployed site, framed in an iframe. Blocks render exactly as they do in production. Click any block to select it.
• Properties panel — slides in from the right when you select a block. Every field from the block's schema (declared with fields) appears here (text inputs, media pickers, link pickers, color pickers, etc.).

Adding a block

1. Open the Block Library on the right.
2. Find the block you want (scroll or browse categories).
3. Drag it onto the canvas.
4. Drop at the bottom (appends) or between existing blocks (inserts at that position).

On drop, the block appears with its default content (from the block's schema) and renders live in your framed site. Click it to open the properties panel and customize. See Blocks and Block Development for how blocks are defined.

Only blocks you've registered in your app show up here — the editor reads them over the SDK bridge, so the picker always matches what your site can render.

Editing block content

Click any block on the canvas to select it. The properties panel opens on the right. Fields render based on the block's schema:

• Text — inline text input / textarea.
• Rich text — opens a dedicated floating editor at the bottom (bold, italic, lists, links).
• Media (image/video) — media picker opens the library; select existing or upload new.
• Link — URL + label; picker also suggests internal pages.
• Color — color picker with theme tokens.
• Select / checkbox / radio — dropdown or toggles from the schema's options list.
• Repeater — for blocks with lists of sub-items (e.g., testimonials, FAQ items), add/remove rows inline.

Every edit posts to the framed site over the bridge, so changes appear live in the real site as you type.

Editing per language

The language switcher in the top bar toggles which locale's content you're editing. Switching from English to Polish:

• Saves the current field values to the English copy.
• Loads the Polish copy into the properties panel and canvas.
• Fields that are empty in Polish show the placeholder text, not the English fallback.

Every string field is stored per-language. Numbers, IDs, and settings (e.g., image URLs) are shared across languages.

Moving and deleting blocks

Hover a block on the canvas to reveal controls:

• Drag handle (grip icon) — drag up/down to reorder.
• Delete — click the trash icon OR press Delete / Backspace when the block is selected (and no text field is focused).
• Duplicate — keyboard shortcut Cmd+D (macOS) / Ctrl+D (Win/Linux).

No confirmation dialog appears — deletes are immediate but fully reversible via Undo.

Undo and redo

• Cmd+Z / Ctrl+Z — undo last change.
• Cmd+Shift+Z / Ctrl+Shift+Z — redo.

History is kept per page, up to 50 steps. Switching to another page preserves both pages' histories independently. Text editing has its own native undo that doesn't eat into the block history.

Draft autosave and publishing

Your draft is the working copy of the page's content, stored in Cmssy. As you edit, changes are saved to the draft — reopen the editor later and you pick up where you left off. The draft is what the framed site renders in preview mode; visitors keep seeing the published version until you publish.

The draft lives in Cmssy, not your browser, so it follows you across devices and browsers — the last saved draft is always there when you reopen the page.

Draft vs published

Every page has two states of its blocks:

• Draft — what you see and edit in the builder, and what preview mode renders. Always latest.
• Published — what the delivery API serves and what visitors see on your deployed site.

The Draft badge in the top bar appears whenever the page has unpublished changes (or has never been published).

From the three-dot menu:

• Publish — promote the current draft to published. The delivery API now serves it; your deployed Next.js site re-renders the page (ISR revalidates on publish via the /api/revalidate webhook), so the change reaches visitors within seconds.
• Unpublish — remove the page from the delivery API (your site returns 404 for it). Draft remains.
• Revert to published — discard all draft changes, reset to the last published version. Irreversible beyond undo depth.

Layout blocks (header / footer / sidebars)

Layout blocks — header, footer, sidebars — render on every page by inheritance. In the framed site they appear around your page content with their own overlay controls.

• Click a layout block to edit it just like any content block.
• Changes to an inherited layout block propagate to all pages that inherit it.
• A specific page can override a layout block — the change applies only to that page.

Full details: Layouts.

Preview mode

Three-dot menu → Preview opens your current draft in a new tab. This loads your deployed site in preview (draft) mode at a signed URL, so you can verify how the unpublished content looks on the real site before publishing.

Three-dot menu → Open Page opens the published URL on your deployed site (404 if unpublished).

Interaction mode

A toggle in the bottom-right of the canvas switches between two modes:

• Edit mode (default) — overlay handles visible, clicks select blocks, links inside blocks are inert.
• Interaction mode — overlays hidden, links and forms behave exactly as on your live site (it is your live site). Use to test interactive behavior without leaving the editor.

Editing with AI (MCP)

Beyond the visual editor, Cmssy exposes an MCP server so Claude can create pages, add blocks, and edit content for you — the same content the delivery API serves. See MCP Server.

Keyboard shortcuts reference

Replace Cmd with Ctrl on Windows and Linux. All shortcuts are blocked while you're typing inside a text field — so native text undo, delete, etc. still work normally.

What the editor does not do (yet)

• No responsive preview toggle. The canvas is fluid but doesn't simulate specific device widths. Use the Preview button and resize your browser to test.
• No real-time collaboration. If two users edit the same page simultaneously, the last save wins. Coordinate edits by page or section.
• No version history beyond undo. Revert to published is the deepest rollback. If you need named versions or long-term history, export before making large changes.