Studio is the AI editor for the whole site — the first item of the Studio area.
Layout#
Two panes. The assistant streams an agent conversation; the agent can read and write across the design system, setup documents, schemas, collections, content and templates — the same writes you could make by hand. The other pane toggles between a live preview of the published site (the real renderer, the real data) and a code view: a file tree of every code-bearing artifact of the project — design/system.css, the versioned template bundles, project e-mail templates, the read-only web setup — opened in a Monaco editor. Whatever file is open rides along as context, so "this file" means that file.
When the language is in the URL (path mode), the preview keeps the address and the language in step: the address decides the language (a link to /en/… renders the English page, an unprefixed one the first language), and picking another language opens the same page in that language (its own URL when it has one, else the same path under that language's prefix). Links in the preview carry the prefix exactly as on the published site.
Clicks in the preview#
With Live edit on, the preview's Clicks setting decides what a click does:
- Interact (the default) — a click acts as on the published site: links navigate, buttons and forms work. Double-click (or Alt+click) an editable text or image to edit it in place. A link that wraps editable content waits a moment before navigating, so the double-click can open the editor instead.
- Edit — a click opens the editor on what you clicked; Alt+click acts natively.
Your choice is remembered. Previews never show the cookie bar.
Code (the last pane item) opens the same Studio pinned to the code view.
How to navigate in the Studio#
On a desktop the Studio has no toolbar: everything sits in the Studio menu, which opens where you right-click, whether that's in the preview or the pane around it. On a phone, the Studio button in the bottom bar opens the same menu as a sheet. Esc or a click outside closes it.
Moving to another page#
- Follow a link. In Interact mode the preview works like the published site: click a menu item, a button or any link and the preview opens that page. In Edit mode, Alt+click a link to follow it.
- Pick a page. Hover Pages in the menu for a short list (the homepage, the pages from Web setup and the documents that have their own address), then click one. Click the Pages row itself to open the full list with a search box. Under the list, type any site path (empty = the homepage) and press Go. This is how you reach a page that nothing links to yet.
- Switch the language. Language opens the same page in another language (see the language rules above).
- Check other widths. Page width switches between the pane's full width, a tablet (768 px) and a phone (390 px).
View site in the header opens the published site in a new tab.
Editing on the page#
- Text and numbers edit in place: double-click them (or single-click in Edit mode). Enter finishes, Esc puts back the value you started with. Changes save as you go: the menu shows Saving… and, if a save fails, Retry.
- Everything else — rich text, dates, icons, images — opens an edit dialog with the field's own editor. The small pen chip next to text you are editing opens the same dialog.
- Undo. Ctrl+Z reverts your latest change, and Ctrl+Shift+Z restores it. Actions in the menu lists your recent changes, each with Revert.
Editing structures, objects and lists#
A field on a page is often part of something larger, such as one card in a list of cards or one value of a section's object. When you right-click it, the menu shows that nesting as edit-scope crumbs, outermost first. For the title of the first card in a list, that's section › facts › #1 › title:
| Crumb | What the dialog edits |
|---|---|
the field (title) |
just that value |
the item (#1) |
every field of that one card |
the list (facts) |
the whole list: every item, + Add … for a new item at the end, the bin on an item to remove it, and the ⋮⋮ handle to move it |
the object or element (section) |
every field of that section, the list included |
Click a crumb to open the dialog at that level. The same crumbs run across the top of the dialog, so you can move up or down without closing it. One Save writes the whole level at once, and Ctrl+Z reverts it as one action; Cancel writes nothing. A new item starts with the item's default values: fill it in before you save.
Reordering a list. Open the list's crumb and drag an item by its ⋮⋮ handle to a new place, or click the handle (or Tab to it) and press ↑ / ↓ to move it one place at a time. The preview shows the new order once you Save. Asking the assistant ("move the third card to the top") works too.
The dialog edits values, not the shape: it can't add fields to an object. For that, use Open in editor (bottom left of the dialog) to open the page's document in the document editor.
Working with the assistant#
The assistant is the column on the right. Type what you want and press Enter to send (Shift+Enter starts a new line). The starter suggestions under its greeting are a quick way in.
- Point at what you mean. Right-click something in the preview and hover Assistant. You can attach the Page (its document and template), any of the edit-scope levels (the field, the item, the whole list, the section) or, under Containers, a block of the page's markup. Each choice highlights in the preview while you hover it. Attached things show as chips above the message box, so "this" and "these cards" in your message refer to them; × removes a chip. In the code view, Discuss attaches the open file the same way.
- Add references. The + button (or dropping files on the chat) attaches images, PDFs, Word documents and text files, up to 10 MB each.
- Follow the work. While the assistant works, you can stop it with Stop. Each answer lists the changes it made (Applied changes), and the preview updates on its own. If a turn stops at the step limit, Continue picks it up where it left off.
- Approvals. The chip in the header sets when the assistant asks before acting: before every change, only before deletions, or auto. When it asks, you can allow once, for this chat, or always for that tool in this project, or deny with a reason it reads.
- Chats. Chats in the header lists your conversations: start a new one for an unrelated task, rename, or delete. A chat keeps its history, so you can come back to it later.
- Model. The model picker under the message box chooses the AI model. Every turn uses credits.
Costs#
Every Studio turn is metered on the project's credits from the model's token usage — the price of a turn shows next to the input, and a turn is refused before it starts when the wallet is empty.
Fullscreen#
The header's fullscreen switch drops the app chrome for a working session; the URL stays the same.
Needs the web capability on the member (the assistant additionally needs generative) and web hosting on the project.