Back to docs
Page Builder — Visual Editor
Master the drag-and-drop editor with its four-panel layout and design tools.
June 4, 2026builder · drag-drop · components · design · collaboration
🎨 The Page Builder is a professional drag-and-drop editor. No code required.
Four-Panel Layout
⬅ Left — Components & Layers
Browse the UI library and inspect the layer hierarchy
🖼 Center — Canvas
The live editing area — drag, drop, click
➡ Right — Properties & Style
Configure the selected component's behaviour & look
⬆ Top — Toolbar
Save, publish, preview, undo/redo & responsive view
Top Toolbar Actions
- Save — Persist draft changes
- Publish — Make the page live
- Preview — Open a live preview in a new tab
- Undo / Redo — Navigate change history
- Responsive View — Switch between Desktop, Tablet, Mobile
- AI Assistant — Generate content & design suggestions
Right Panel Tabs
| Tab | Purpose |
|---|---|
| Properties | Component-specific settings (text, links, data bindings) |
| Design | Colors, spacing, typography, borders |
| Interactions | Click actions, hover effects, event handlers |
| Advanced | Custom CSS classes, animations, visibility rules |
Keyboard Shortcuts
⌘S Save ⌘Z Undo ⌘⇧Z Redo Del Remove component
💡 Tip: The Page Builder requires a minimum screen width of 768 px. On smaller screens use the preview mode only.