> ## Documentation Index
> Fetch the complete documentation index at: https://docs.buildbetter.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# The Editor

> The two-column prototype editor — canvas on the left with viewport and click-to-select controls, chat sidebar on the right for talking to the agent

The editor (`/prototype/:id`) is where the redesign happens. Canvas on the left, chat with the agent on the right.

## Canvas (Left)

The canvas renders the captured webpage (or blank canvas) in a same-origin iframe. The iframe is locked to the prototype — link clicks and form submissions are intercepted so you can't navigate away by accident.

### Toolbar

The toolbar at the top of the canvas has four control groups.

#### Select Element

The **Select element** button (mouse cursor icon) toggles a click-to-select mode.

When active:

* The button shows **"Click an element..."** with a primary accent
* Hover over any element in the canvas to see a 2px purple outline
* Click to select. The system generates a CSS selector (prefers `#id`, then `tag.class.class`, then ancestor walk with `:nth-of-type()`)
* The next message you send is prefixed with `[Selected element: <selector>]` so the agent scopes its edits to exactly that element

Click the button again or click anywhere outside an element to exit select mode.

#### Viewport

Four buttons control the canvas width:

| Button                       | Width           |
| ---------------------------- | --------------- |
| **Desktop** (monitor icon)   | 1280px          |
| **Tablet** (tablet icon)     | 768px           |
| **Mobile** (smartphone icon) | 375px           |
| **Fit** (eye icon)           | Full pane width |

Your choice persists in `localStorage` — the editor remembers it across reloads.

#### Sidebar Toggle

The panel-icon button collapses the right chat sidebar to give the canvas full width. Useful when you want a closer look. State persists across reloads.

### Iframe Behavior

* The captured HTML loads via `srcdoc` with inlined stylesheets
* On every version change, the iframe remounts at the base, then replays the patch log to reconstruct state
* Links are intercepted by a capture-phase click listener — `e.preventDefault()` prevents navigation
* Forms are similarly blocked from submitting
* Thumbnails (480×300, JPEG quality 0.7) capture client-side after each edit using `html-to-image`

## Chat Sidebar (Right)

The chat sidebar holds the conversation with the agent.

### Header

* **All prototypes** — back link to `/prototypes`
* **Prototype name** — click to rename inline (max 200 chars)
* **Origin URL** — source domain shown below the name (or blank for blank-canvas prototypes)
* **Share menu** — copy as prompt or copy a link
* **Delete** — trash icon (red on hover)

### Conversation

The chat history shows user messages and agent responses in order.

Agent responses combine three things:

* **Narration** — short prose ("I updated the hero background and increased the headline size")
* **Tool calls** — cards showing the agent's tool name, parameters, and output summary
* **Summary lines** — e.g., "Modified `.card` (styles)" or "Removed 3 elements matching `.footer-cta`"

Empty state: **"Describe a change. Try: 'make the hero headline red and bigger' or 'remove the footer'."**

While the agent is working, you'll see a **"Working..."** spinner. Errors surface in a banner with a retry option.

### Composer

The text input at the bottom of the sidebar accepts your prompts.

* Placeholder: **"Tell the agent how to redesign this page..."**
* Submit on **Enter**
* Disabled when viewing an older version (the placeholder changes to **"Return to the latest version to keep editing"** — see [Versions & Forking](./versions-and-forking))

### Quick Prompts

The **Quick prompts** dropdown (wand icon) below the composer holds a menu of pre-written prompts. Clicking one inserts the full text into the composer for review — it doesn't auto-submit. See [AI Editing](./ai-editing#quick-prompts) for the full list.

## Iterations Strip

When more than one version exists, the **Iterations** strip appears at the bottom of the canvas.

* Header shows total version count and a **"Viewing older"** badge if you're not on the latest
* Scrollable strip of 136×84 thumbnails labeled `v0`, `v1`, etc.
* Click a thumbnail to switch to that version (read-only; composer disables)
* Hover for two actions:
  * **Fork** (git-fork icon) — see [Versions & Forking](./versions-and-forking#forking-a-version)
  * **Share link** (link icon) — copies a `?version=<id>` URL scoped to that version
* **Back to latest →** button at the end when viewing an older version
* Tooltip shows full timestamp on hover

## Auto-Save

Every completed turn (user message + agent response) saves a new version. There's no manual save button. If a save is in flight and a new turn completes, the latest snapshot queues and saves once the in-flight request finishes.

<Tip>
  If you're about to try a risky change, use **Fork** first. You get a clean prototype to experiment in, and the original keeps its current version as the latest.
</Tip>