The Editor
Use the visual editor to create pages, maintain content and review changes made by an AI agent. Browser editing does not require an AI connection or publishing accounts.
Choose the Organization, select the Site and Version, then open Pages and select a page. On a phone, open the sidebar menu first.
Desktop layout
Section titled “Desktop layout”
The editor displays three panels when the screen is wide enough:
| Panel | What it holds |
|---|---|
| Left | Add for the block library and Structure for the page’s block tree. |
| Center | A live preview rendered from the page content. |
| Right | Fields for the selected block, or page metadata when no block is selected. |
The header provides undo/redo, preview devices, Meta for page settings and Publish for saving, status and deployment.
On a phone
Section titled “On a phone”Narrow screens show one panel at a time. Use Blocks, Preview and Edit block or Settings to switch panels. Select a block from Structure to open its fields. Publish stays in the header, including the deploy control when publishing setup and your permissions allow it.
The mobile layout changes how you navigate the editor. The preview device selector separately controls which responsive breakpoint you are editing.
Adding blocks
Section titled “Adding blocks”Open the Add tab and either:
- Click a block — it’s appended to the end of the page, or
- Drag it into the Structure tree — a coloured drop-line follows your pointer showing exactly where it will land, including inside containers
Dragging is how you place a block precisely. Clicking is faster when you’re just appending.
Search the library by name at the top of the tab. Block ids are per-site — your custom blocks appear in the same list as the built-in ones.
Editing content
Section titled “Editing content”Three ways, depending on what you’re changing:
Click a block in the preview or the tree to select it. Its fields appear in the right column, generated from the block’s own schema.
Double-click text directly on the canvas to edit it in place. Enter or clicking away commits; Escape cancels. This works on plain-text fields — headings, labels, button text — and is the fastest way to fix a typo.
Use the Structure tree for anything about arrangement rather than content: reorder by dragging, duplicate, delete, or double-click a row to rename the block (the name is a label for you; it doesn’t appear on the site).
The tree shows each block’s actual content — the heading text, the image filename — rather than just its type, so a long page stays navigable.
Keyboard shortcuts
Section titled “Keyboard shortcuts”| Shortcut | Does |
|---|---|
⌘Z / Ctrl+Z |
Undo |
⇧⌘Z / Ctrl+Shift+Z |
Redo |
⌘D / Ctrl+D |
Duplicate the selected block |
Delete / Backspace |
Delete the selected block |
Enter |
Commit an inline edit or a rename |
Escape |
Cancel an inline edit, close a dialog |
Undo covers block edits — adding, moving, deleting, field changes. A burst of
typing in one field collapses into a single undo step, so one ⌘Z takes you back
to before you started typing, not one character at a time.
Responsive editing
Section titled “Responsive editing”The device buttons in the header do two things at once, and the second one is easy to miss:
- They resize the preview.
- They set which breakpoint you’re editing.
So if you pick Phone and then change a grid’s column count, you’ve set that value for phones only. Switch back to Desktop and the desktop value is untouched.
| Button | Preview width | Breakpoint written |
|---|---|---|
| Phone | 390px | mobile (< 640) |
| Phone — landscape | 740px | tablet (≥ 640) |
| Tablet | 1024px | laptop (≥ 1024) |
| Tablet — landscape | 1280px | desktop (≥ 1280) |
| Desktop | full width | wide (≥ 1536) |
Fields that support per-breakpoint values show a small badge with the current breakpoint. When a value is inherited rather than set explicitly, the badge says inherited and offers a reset control to drop back to the inherited value.
Breakpoints inherit upward from mobile: set something once at Phone and it applies everywhere unless a larger breakpoint overrides it. That’s why it’s usually best to design mobile-first and only override where a larger screen genuinely needs something different.
Page metadata
Section titled “Page metadata”Click Meta in the header, or just deselect the current block, to get the page’s own fields: page title, SEO title, meta description, OG image and alt text, canonical URL, and the noindex toggle.
The same panel holds the Template picker and the Content mode switch (blocks ↔ HTML).
Saving and publishing
Section titled “Saving and publishing”Content edits are kept in a working copy. They do not change the saved publication input or the live site until you save and deploy. Read the save state in the header, then open Publish:
-
Changes — Save (commits the draft) or Discard (throws it away).
-
Status — Draft, In review, Unlisted, or Published. Status changes apply to the saved page. They control inclusion in the next deployment; changing status does not by itself deploy the site.
-
Deploy — rebuilds the static site from saved, published content. The panel summarizes pending changes below the deploy control. Open the change list for details. Build and distribution progress appear here; a public link is shown only after the deployment has been verified.
The Pages list also provides a site publishing control. If deployment is locked, follow the link to Publishing setup. You can keep editing and use expiring previews while setup is incomplete.
Reviewing before you save
Section titled “Reviewing before you save”If the AI agent built something substantial, use Review changes. It shows the saved page and your draft side by side in the same renderer, plus a structured list of what changed block by block.
That’s the intended way to audit an agent’s work: look at the diff, then save.
HTML-mode pages
Section titled “HTML-mode pages”Pages in HTML mode get a different editor — a CodeMirror pane with syntax highlighting instead of the block library, plus the same preview, metadata and Publish menu.
You also get SERP and Open Graph previews showing how the page will look in Google results and when shared on social, and a History panel for restoring earlier revisions.
Switch a page between modes with the Content mode control. Converting HTML to blocks is heuristic — check the result. Converting blocks to HTML discards the block tree. Both directions save a revision first, so neither is a one-way door.
Templates and custom blocks
Section titled “Templates and custom blocks”Two related editors, reachable from the site sidebar:
- Templates — a block tree that wraps a page’s content. Build the shared outer structure once, drop a content slot where the page’s own blocks should render, then assign the template to pages.
- Blocks — create reusable custom block types for this site: schema, HTML template, scoped CSS, and optionally client-side JavaScript (which requires an explicit opt-in, because it runs in your visitors’ browsers).