> ## Documentation Index > Fetch the complete documentation index at: https://docs.avocadostudio.dev/llms.txt > Use this file to discover all available pages before exploring further. # A tour of the editor > What is on screen when you open Avocado Studio, what each control does, and the one button that makes the page clickable. This is the page for the person who *uses* Avocado Studio rather than the person who installed it. No environment variables, no code. If your site is already wired up and someone has sent you a link to the editor, start here. The editor is one screen with three regions: a **top bar** across the top, the **Chat** panel on the left, and a **live preview** of your real site filling the rest. The preview is your actual page — the same components, the same styles, the same content — not a picture of it. ## The top bar From left to right: | Control | What it does | | - | - | | **Site name** | When you have more than one site, it opens a menu: switch to another site, **+ Add site**, **Site settings**, **Pull from site**, **Pull this page**, and **View all sites** | | **Editor** | The editing screen this page describes | | **Activity** | Opens the **History** drawer beside the preview: every step, what it changed, and a way back — see [review and undo](/editing/review-and-undo) | | **Settings** | Your own preferences: interface language, light or dark theme, which model plans your edits, and **Clear chat** | | **Desktop / Tablet / Mobile** | Preview the page at that width | | **Language** | On a multilingual site, switch which language version you are editing | | **Page** | Switch which page you are editing. Every page the site declares is in here | | **Publish** | Appears when you have unpublished changes, with their count. Opens a review before anything goes live — see [publishing](/editing/publish) | **Site settings** holds the site's name, logo, hosting and media, and the [editorial brief](/editing/brief). **Pull from site** and **Pull this page** replace drafts with what the site currently has — see [pages and drafts](/editing/pages-and-drafts). Two things appear only when something is off, and both are worth knowing by sight: * **Limited**, a badge in the top bar — the site is not telling the editor what its blocks are, so you get a read-only preview or text-only edits. That is an integration problem; send it to whoever wired the site up, along with [coverage checks](/integration/coverage). * **AI editing is running without an API key**, a note above the chat composer — chat has no model behind it. Simple, literal edits still work, and so does everything you do in the preview and the Properties panel. Anything phrased your own way needs a key. **Show details** says which file the key goes in; adding it is a job for whoever set the site up. ## The Chat panel **Chat** is the main surface. You describe a change, it happens. The composer at the bottom says *Ask anything*, and around it sit four controls: * **Select an element** — the cursor button. This is the important one; see below. * **Attach file** — images and PDFs. Useful for *"use the photo attached"* or *"take the copy from this PDF"*. See [chat attachments](/features/chat-attachments). * **Start voice input** — dictate instead of typing. The microphone only shows when the site has speech transcription set up. * **Send message**, which becomes **Stop generation** while a change is being made. Undo and redo buttons sit just above the composer whenever there is something to undo or redo. ## The Properties panel **Properties** is the other way to edit. Open it with the sliders button in the Chat panel's header, or just click a block in the preview — by default the panel opens on its own when you select something. You can turn that off in **Settings** with **Open properties on select**. With nothing selected it shows the **Page**: its navigation label and its **SEO** fields — **SEO title**, **Meta description** and **Open Graph image**. With a block selected it lists that block's real fields — text, rich text, images with their **Alt text**, links, list items — and writes real values as you type. No model is involved in typing, so it costs nothing and never surprises you. Use chat for *"rewrite this section to sound warmer"*; use the panel for *"this price is 49, not 47"*. A few details worth knowing: * **Links** take a page on the site, a document, a web address, an email or a phone number. Start typing and the panel suggests matching pages, and warns when a path has no page behind it. * **The sparkle button** on a text field offers quick AI rewrites — *Make it shorter*, *Fit within 60 characters* for an SEO title, *Generate alt text* for an image — or a request of your own for that one field. Those do call the model. * **A greyed-out field** is marked *Read-only on this site*. Your developers fixed it on purpose; changes to it cannot be published. ## Click-to-select is off until you turn it on The single thing most worth knowing about this editor: **clicking the preview does nothing until you switch the picker on.** Press the cursor button in the composer — its tooltip reads **Select an element** — and then clicking a heading, an image or a card highlights that block and tells the chat what you mean. Escape turns it back off. It defaults to off on purpose. The preview is a live site, so links, tabs and carousels have to keep working while you read; a picker that swallowed every click would make the page impossible to browse. But it does mean a perfectly healthy editor looks inert on first contact. With something selected, the composer shows **Editing: *block***, and your next sentence is scoped to it. *"Make this shorter"* is unambiguous once the editor knows what *this* is. With the picker on, a selected block also gets its own controls in the preview: move it up or down, delete it, change its image, and add a block above or below. Adding opens the **Add block** picker, which lists **Sections** — whole page sections such as a hero or a FAQ — first, and folds smaller **Building blocks** away until you open them or search. Your site can group and hide entries in that list, so it may not match another site's. Some blocks, such as a site-wide header, can be fixed in place by your developers; those have no move, delete or add controls. ## What happens when you send a message A thinking indicator appears and then collapses into **Thought for \_n\_s**, which you can expand if you want to see the reasoning. Operations apply to the page as they arrive, so you watch the page change rather than waiting for a result. A readable summary of the change, with the affected block named. **Undo** sits on the message that produced the change, and a global undo and redo sit above the composer (Ctrl+Z and Ctrl+Y). Undo is recorded on the server, not a browser trick, so it survives a reload. A few kinds of request do not apply and then offer an undo. They stop and ask first: deleting a page, changing several pages at once, removing three or more blocks, or removing most of a page. The message describes what is about to happen and offers **Apply changes** (or **Delete page**) and **Discard**. ## Nothing you do here touches the code Every edit is one of a fixed set of typed operations against your content. There is no operation for "change a file", so no sentence you type — however it is phrased, however confident the model is — can alter a component, a route or a dependency. The boundary is the shape of the system, not a rule someone remembered to apply. The practical version: **you cannot break the website from this screen.** The worst you can do is publish something you did not mean to, and [the History drawer](/editing/review-and-undo) gets you back to the version before it, ready to publish again. ## Where to go next What to say, what not to bother saying, and which requests cost real money. Where your unpublished work lives, and why the live site looks unchanged. Every way back: undo, the History drawer, and restoring any earlier version. The review dialog, publishing only some pages, and how to tell it worked. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.