Edit a Page Visually

Overview

With a site loaded on the canvas, you edit by clicking. Select an element, and an editor panel on the right lets you change its text, swap its image, change a link, or restyle it. The Layers panel gives you a tree of the page so you can find and select elements that are hard to click. Every change writes back into the real source files on your draft branch.

📘 Good to know

Some values can't be edited by a click, like a translated string or a list built by code. Clicking one of those opens the chat instead. See Use the agent for hard edits.

1. Switch the canvas to edit mode

The canvas has two modes, shown as a toggle above it: Edit and Interact. In Edit, clicking selects elements to change them. In Interact, clicks pass through to the site, so you can open menus, follow links, and reach the state you want to edit. Switch back to Edit to select. You can also change the preview width with the viewport toggle (desktop, tablet, phone) and, on a multi-page site, switch pages with the page switcher.

📘 Media pending

Screenshot of the canvas toolbar hasn't been captured yet.

2. Select an element

Hover an element on the canvas to highlight it, then click to select it. The editor panel opens on the right for the selected element. You can also select from the Layers panel in the sidebar, which lists the page as a tree of tags and labels: click a row to select it on the canvas, and hovering a row highlights it. Layers is the reliable way to reach an element that's behind another one.

📘 Media pending

Screenshot of a selected element and the Layers tree hasn't been captured yet.

3. Edit text, image, and link

With an element selected, the editor panel gives you plain fields:

1. Text. Type new text and apply it to replace what's there.
2. Image. Paste an image URL to change the src, or use Upload to pick a file from your machine. The file is sent to the site and wired in.
3. Link. Paste a new URL to change where a link points (href).

Each field applies on its own. If the value you clicked isn't a plain literal in the code, Studio tells you it sent the edit to the agent instead.

📘 Media pending

Screenshot of the text, image, and link fields hasn't been captured yet.

4. Restyle with the Style panel

The Style panel, in the same editor panel, changes the element's Tailwind classes. It's grouped into Text, Layout, and Appearance:

• Text: text color, font weight, alignment, and font size.
• Layout: width, height, padding, and margin.
• Appearance: background color, corner radius, shadow, gradient, and opacity.

Colors come from your site's own design tokens when Studio finds them in your Tailwind config or CSS, so the swatches match your brand. You can still pick any color with the color field, which is your escape hatch for an off-brand value. A state selector at the top (base, hover, active) lets you style the hover and active states, not just the resting one.

📘 Media pending

Screenshot of the Style panel hasn't been captured yet.

📘 Good to know

If your repo defines brand colors in tailwind.config or a CSS theme, Studio reads those and shows them as swatches. If it doesn't find any, it falls back to a default set of presets.

5. Add, move, and reorganize elements

Beyond editing one element, you can build structure. The editor panel can insert a new element after the selection: text, a button, or a box. From the canvas you can also delete, duplicate, paste, and move elements, and undo or redo your last changes. Every one of these writes back to the source file.

6. See what changed

Edits land on a draft branch, and the sidebar keeps a running list. The Changes panel lists every file you've touched with its status and the count of lines added and removed. Click a file to open its diff and see the exact before and after. The file tree above it lets you browse and read any file in the project.

📘 Media pending

Screenshot of the Changes panel hasn't been captured yet.

Where to go next

• Use the agent for hard edits for values a click can't reach.
• Preview and publish your site to review the diff and ship.
• Example: edit your pricing page for a worked end-to-end edit.
• Website Studio for the overview.
• Desktop App Overview for the rest of the desktop app.