The Page Editor
The page editor is where you actually build each page of your hosted website. It's a
modern, Notion-style block editor: you type, you press / to drop in a block, you select
text to format it, and everything saves automatically as you go. This page walks through
the editor layout, how to insert and configure blocks, the keyboard shortcuts, and how
autosave keeps your work safe.
Where it lives: open Website → Pages, then click any page row to open it in the editor. The hosted website is a paid-plan feature (Commerce and up). For the bigger picture of how pages fit together, see Creating & Managing Pages and the Website Overview.
The editor layout
The editor has three panes:
| Pane | What it is | Notes |
|---|---|---|
| Pages rail (left) | A list of all your site pages, so you can jump between them without leaving the editor. | Collapsible — hide it to give the canvas more room. |
| Canvas (center) | The live page you're building. This is where you type, insert blocks, and arrange content. | This is the main working area. |
| Inspector (right) | Settings for whatever you currently have selected — the page itself, or the block your cursor is in. | Resizable — drag its left edge to make it wider or narrower. |
Click a block on the canvas to select it; the Inspector updates to show that block's options. Click an empty part of the page (or the page header) to see page-level settings like the SEO title and description.
Adding blocks with the slash menu
Anywhere you can type, press / to open the slash menu — a searchable list of
everything you can insert. Start typing to filter (for example, /hero, /gallery,
/faq), then press Enter or click to drop the block in.
Blocks are organized into groups:
- AI — let AI write or rewrite the section for you (see AI actions below).
- Text — Heading, Subheading, plain Text, bulleted and numbered lists, Quote, Code, a Divider, and an inline Button (a call-to-action that sits between paragraphs).
- Layout — structural and content blocks: Hero, CTA strip, Testimonials, Process / steps, Team, Icon list, FAQ, Comparison table, a Section break (start a new section), and Templates… (start from a pre-designed page).
- Storefront — blocks that pull live from your real catalog: Featured products, Category grid, and a full Storefront embed.
- Media — Gallery, an inline Photo, a Section image (the section's feature or background image), and a Map.
- Embeds — third-party Embed (YouTube, Vimeo, Loom, or Supademo) and a Contact form.
For a full reference of every block and what it does, see Content Blocks.
Tip: Storefront blocks (Featured products, Category grid, Storefront embed) always show your current catalog, so they stay up to date automatically as you add or change products — no need to re-edit the page.
Formatting text
Select any text and a small formatting menu pops up just above your selection. From it you can apply:
- Bold (
Cmd/Ctrl+B) - Italic (
Cmd/Ctrl+I) - Strikethrough
- Code (inline monospace)
- Link — click the link button, paste or type a URL, and confirm; the same control lets you edit or remove an existing link.
The formatting menu also includes a per-block alignment control (left / center / right) for the text you're working in.
Inline photos and buttons
You can drop media and calls-to-action right into the flow of your text, between paragraphs:
- Inline Photo — type
/phototo upload an image into the body, or simply paste or drag-and-drop an image into the editor and it uploads in place. - Inline Button — type
/buttonto add a call-to-action button between paragraphs. A floating toolbar lets you set the button's label and link. (This is separate from the full-width CTA strip block in the Layout group.)
The Inspector: per-block settings
When a block is selected, the Inspector (right pane) shows its settings. Most content sections share a common set of layout controls, presented as visual tile pickers with a live preview:
| Control | Options | What it does |
|---|---|---|
| Width | Narrow, Default, Wide, Full-bleed | How wide the section's content stretches across the page. |
| Background | Card, Tinted, Dark, None | The section's background treatment (a white card, a subtle tint, a dark band, or none). |
| Padding | None, Compact, Default, Spacious | How much vertical breathing room sits above and below the section. |
| Alignment | Left, Center, Right | How the content is aligned within the section. |
Beyond these shared controls, each block type adds its own settings — for example, a Hero has a headline, image, and CTA; Featured products has a product picker; a Gallery has an image list; an FAQ has its question/answer pairs. See Content Blocks for the per-block details.
Note: A section can also have a Section image used as a feature or background image (type
/→ Section image, or use the Media group). When a section uses a full-bleed image background, the Background control adjusts the readability overlay.
Page-level settings
Click the page header (or an empty area of the canvas) to put page-level settings in the Inspector. These include the page's SEO title and SEO description, its navigation labels, its editorial status (Draft / In review / Approved), and — on the home page — the Regenerate from my catalog action. Several of these have one-click Generate buttons that use AI; see the AI Website Assistant for details.
Autosave and the save-status pill
You don't need to press save — the editor autosaves continuously, about one second after you stop typing. A small save-status pill in the top bar tells you exactly where things stand:
| Pill | Meaning |
|---|---|
| Saving… | Your latest change is being written to the server. |
| Saved · just now / Ns ago | Everything is saved; the timestamp keeps you reassured at a glance. |
| Offline — saved locally | You've lost your connection, so changes are kept in a local backup on your device and will sync when you're back online. |
| Conflict — review changes | The page was also edited somewhere else (e.g. another tab or teammate). See below. |
| Save failed — retrying | A save didn't go through; the editor keeps retrying. If it persists, check your connection. |
To force an immediate save at any time, press Cmd/Ctrl+S. (The pill gives a quick
pulse to confirm.)
Offline backup
If your connection drops mid-edit, the editor doesn't lose your work — it keeps a local backup in your browser and shows Offline — saved locally. When the connection returns, your changes sync automatically.
Conflict banner
If someone else (or you, in another tab) saves the same page after you opened it, autosave pauses and a banner appears above the canvas: "This page was edited elsewhere…" You choose how to resolve it:
- Reload latest — discard your local pending edits and load the newest saved version.
- Keep mine — overwrite the other edit with your current version.
Autosave stays paused until you pick one, so two people can't silently clobber each other's work.
Keyboard shortcuts
Press ? at any time in the editor to open the shortcuts cheatsheet. The full set:
| Shortcut | Action |
|---|---|
Cmd/Ctrl+K | Open the command palette (jump to a page, run an action). |
? | Show the keyboard-shortcuts cheatsheet. |
Esc | Dismiss the current menu or clear your selection. |
/ | Insert a block (inside a text block). |
Cmd/Ctrl+S | Save now (flush autosave immediately). |
Cmd/Ctrl+Shift+H | Open revision history to view or restore an earlier version. |
Cmd/Ctrl+J | Run the AI assistant on the current text selection. |
Cmd/Ctrl+B / Cmd/Ctrl+I | Bold / Italic the selected text. |
On Windows/Linux the modifier is
Ctrl; on Mac it's⌘. The cheatsheet shows whichever applies to your machine.
AI actions in the slash menu
The AI group in the slash menu lets you write and improve copy without leaving the
editor. Type / and pick an AI action to run it on the current section. The available
actions are: Write with AI, Rewrite, Shorten, Lengthen, Plain English,
Fix grammar, More formal, More casual, More punchy, and Make a list.
You can run the same actions on just a highlighted passage by selecting text and pressing
Cmd/Ctrl+J. Every AI suggestion lands in an accept/reject review — nothing changes
until you approve it, and nothing publishes automatically. AI is available on paid plans
with a monthly usage allowance and is off on the Free plan.
For the complete guide to AI in the website builder — including generating a full starter site, drafting a page from a one-line prompt, the Inspector Generate buttons (SEO, FAQ, expand About, polish a review into a testimonial), and the per-plan quotas — see the AI Website Assistant.
Next steps
- Content Blocks — every block type and how to configure it.
- AI Website Assistant — write, draft, and generate with AI.
- Navigation & Publishing — preview, publish, schedule, redirects, and revision history.
- Creating & Managing Pages — page types, slugs, duplicating, and search.