The editor

Tour of the editor

A map of the editor: the top bar, the left icon rail, the canvas, and how to close and reopen the editor.

The editor has three parts: a top bar across the top, an icon rail down the left side, and the canvas in the middle, which shows your real site. Panels open from the rail on the left; the AI panel opens on the right.

Top bar

From left to right:

Control	What it does
View menu	Shows the name of the current view (for example Canvas). Open it to switch between Canvas, CMS, SEO, Settings and Analytics, or choose Back to Dashboard.
Edit / Breakpoints / Browse	How the canvas behaves. Edit lets you click to select and edit. Breakpoints shows your page at several screen widths. Browse lets you click around like a visitor. Shown in the Canvas view only.
Page switcher	In the middle of the bar. Shows the page you're on; open it to go to another page. Pages that have subpages open a submenu.
Reload Site	The circular arrow. Reloads the canvas.
Publish	Opens the Publish panel. The button turns green once your site is live, and shows progress (for example Building…) while a publish runs.
Light/dark switch	Switches the editor between light and dark mode. It doesn't change your site.
AI	The chat icon at the far right. Opens and closes the AI panel. A small green dot means the AI is working while the panel is closed.

When you're on a page that shows a CMS item (for example a blog post), the page switcher becomes a three-part path: the page, the collection, and the item. Open the collection part and choose Edit in CMS to edit the items. Open the item part to preview the page with a different item (it reads Choose an item if none is showing).

Left icon rail

The rail is grouped like this, top to bottom:

Icon	Opens
Pages	Your pages and components, on two tabs: Pages and Components.
Navigator	The layer tree of the current page.
Style	Styling for whatever you've selected.
Elements	Elements, ready-made sections and your components to add to the page.
Tokens	Your site's colors and fonts.
Images	Your image library.
Forms	Your forms and their submissions. A number on the icon shows unread submissions.
Code	A read-only view of the code behind the page or your selection.

Click an icon to open its panel. Click it again to close the panel. If your window is short, the icons that don't fit move into a More menu at the bottom of the rail. You can drag the right edge of a left panel to make it wider.

Canvas

The canvas is your actual site, running live. In Edit mode:

Hover to see what's under the pointer.
Click to select. A label shows what you selected, and a path of its parents appears at the bottom of the canvas.
Double-click text, a link or an image to edit it in place.
Right-click a selection for more actions, such as Create component….

See Selecting things on the canvas and Edit text, links and images in place.

If the page you're on doesn't exist, the canvas shows This page doesn't exist yet with a Back to homepage button.

Close and reopen the editor

Closing the editor hides the top bar, rail and panels so you see only your site.

To close it, click the X at the bottom of the icon rail (Close editor), or press Cmd/Ctrl+Shift+E. Pressing Esc on the canvas when nothing is selected and no panel is open also closes it.
To reopen it, click Open editor in the bottom-left corner, or press Cmd/Ctrl+Shift+E again.

The editor stays closed for the rest of that browser tab until you reopen it.