Guides
Editor
Pages, layers, the add panel, the element panel, styles and the chat.
The Editor tab is where you build the site. Add sections, change the words, move things around, set the look, and publish. A site opens on the editor by default. From any other tab, press Open editor on Overview.
The layout
The editor has three columns. The left column holds the tabs: Chat, Pages, Layers, Add and Media. The middle is the page itself, with a top bar above it. The right column is the Element panel for whatever you have selected. Drag the edges to resize a column, or collapse it to a rail.
On the top bar, left to right: the page switcher, a Styles toggle, the Desktop, Tablet and Phone switch, undo and redo, Edit text, Full screen and Publish.
Click anything on the page to select it. Click again to go one level deeper. Hold Cmd or Ctrl to select several. Escape walks back up.
Sections
A site is a stack of sections: a hero, a pricing table, a contact form. Add one from the Add tab. It has a search field, a Sections list and an Elements list. Drag a tile onto the page, or click it to add after the selected section. All components opens the full catalogue.
The Layers tab is the tree of the current page. Drag rows to reorder them. The eye hides a row. Double-click a name to rename it. The plus on a container adds inside it.
When something is selected, a small toolbar floats over it: Up, Down, Duplicate, Hide, Lock and Delete. Save puts a section in your library, so you can reuse it on any page or site. Saved sections show up under Add, then Sections, then Saved. They keep their words and layout and take the styles of wherever they land.
Words
Switch on Edit text and click any text on the page to type over it. Or tell the chat what to change.
Pages
The Pages tab lists the site's pages. Add page asks for a title and makes the path from it. Drag to reorder, or drop a page inside another to nest it one level, which puts it in a dropdown in the header. The eye keeps a page live but out of the nav.
The gear opens the page's settings: name, path, parent page, whether it sits in the nav, its own search title and description, whether search engines see it, and its share image. Duplicate page copies it with its sections to a new path. Changes go live on the next publish.
Styles
Select something and the Element panel shows its Styles: layout, spacing, type, backgrounds, borders and more. Sections also have a Layout choice, a width (contained, narrow or full bleed) and a height. Containers get a column bar: drag the split, or pick a column count.
The breakpoint switch decides where an edit applies. Desktop edits apply at every size. Tablet edits apply to tablet and phone. Phone edits apply to phone only.
A value marked as inherited comes from the site's styles. Press the lock to edit it for the whole site, which takes you to the Design tab. Design is where the site's fonts, colours and tokens live. The Styles toggle on the top bar shows a lighter version in the Element panel: a sample strip and your saved Looks. Click a look to try it, then Save or Discard.
Chat
The Chat tab is the AI. Describe a change and it edits the site. Select a section or an element first and the change is scoped to it. The + button attaches an image, which uploads to the site's media, or a design file. When the chat finishes, you can Undo or Try again. Chat changes share the undo stack with your own edits, so Cmd+Z works on both.
The chat runs on coin or on your own key. When coin runs out, the chat offers Buy coin. Your own Anthropic key goes on the Account page under Editor model. See Plans and billing.
Media
The Media tab is the site's images and files. Upload there, drag an image onto the page, or click one to see it. Copy URL gives you a link to use anywhere. An image in use can't be deleted.
History
Every save is kept. Open the site menu, then History, to see the versions newest first. Restore this version takes the site back, and undoes every save after it.
If the site changes in another tab, a banner says so. Reload takes the newer version. Keep mine carries on with this one.
Keyboard
| Keys | What they do |
|---|---|
| Cmd+1 to Cmd+5 | Chat, Pages, Layers, Add, Media |
| Cmd+/ | Focus the chat |
| Cmd+Z, Shift+Cmd+Z | Undo, redo |
| Escape | Select the parent, or leave full screen |
| Left and right arrows | Switch to your previous or next site |
On a phone or a small screen the editor becomes a sheet with the same tabs.
Publish
Publish on the top bar publishes the site and puts it live. The first time, it asks you to confirm, because the address becomes permanent. The menu beside it has Publish to preview only. The whole story is in Publish and preview.