Page Builder

Overview

The Page Builder is Cmssy's visual, drag-and-drop editor for composing pages from blocks. It opens when you click a page in the sidebar. You arrange blocks on a canvas, edit their content in a properties panel, switch between languages, and publish when ready.

Layout

The editor is split into five zones:

• Top bar — page title, Draft badge (for unpublished pages), 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 every block available in this workspace, grouped by category. Drag from here onto the canvas to add.
• Canvas — the page preview. Blocks render as they will on the live site. 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 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). Click it to open the properties panel and customize.

Drag-and-drop is the only way to add blocks — there is no “click to insert” button today.

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.

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.

Auto-save and manual save

Drafts auto-save to your browser's local storage every 500 ms after you stop typing. If you close the tab or refresh, you pick up where you left off on the next open.

Server save happens when you click Save (bottom of properties panel) or press Cmd+S / Ctrl+S. A toast confirms success. Local draft is cleared on successful server save.

Local storage is per-device. If you edit from a different browser or machine, the local draft doesn't follow you — only the last server-saved state does.

Draft vs published

Every page has two states of its blocks:

• Draft — what you see and edit in the builder. Always latest.
• Published — what visitors see on the live 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 — copy current draft to published. Visitors see the change immediately (subject to CDN cache, typically seconds).
• Unpublish — take the page offline (visitors get 404). Draft remains.
• Revert to published — discard all draft changes, reset to 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 editor, 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

Three-dot menu → Preview opens your current draft in a new tab at a signed preview URL. Useful for verifying look before publishing.

Three-dot menu → Open Page opens the published URL (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 work as they would on the live site. Use to test interactive behavior without leaving the editor.

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.