Edit the live page with visual branches

A comment says what is wrong. A visual branch shows what right looks like. The widget panel is called Visual branches, and its subtitle is the whole promise: edit the live page without a deploy.

Nothing you do here touches production. Changes live in a branch, are visible only to people you send the link to, and are handed to a developer as CSS or as a prompt.

Create a branch first

Open the widget and switch the toolbar to the editor. With no branch selected the version picker reads Live site — no branch changes, and the panel says Create a branch to start changing the live page.

Hit Create branch and give it a name that describes the intent — the placeholder suggests something like Homepage experiment. Everything you change from now on is recorded in that branch, and the toolbar’s Preview version picker switches between it and the untouched live site.

Pick the element

The toolbar carries two modes while the editor is open:

• Pick an element — the page is armed, and the next click selects.
• Use the page — clicks go back to the page, so a menu or a link behaves normally.

The left dock lists the DOM as a tree titled Elements, with a search box and a breadcrumb of the selected element’s ancestors. Use the tree when the thing you want sits under an overlay, or when clicking it would trigger navigation.

Change text and attributes

Double-click an element to edit its text in place; the panel mirrors it under Text, and Revert text puts the original back.

Media and links are edited as attributes rather than as styles:

• Image URL and Alt text for images
• Link URL and Tooltip for anchors

Values that could load external code are refused — the editor answers This value is not allowed rather than applying it.

Change the styling

Style sections mirror the way CSS is grouped: Layout, Spacing, Size, Typography, Background & border, Effects, plus Advanced CSS for anything the controls don’t cover. If you know the property name, type it into Find a CSS property instead of hunting through sections.

A single visual change can hold up to 128 CSS properties. Arrow keys nudge a selected element by 1 px, Shift by 10 px.

While you edit, the panel checks the result and warns in place:

• Contrast {ratio}:1 — below the {required}:1 this text size needs
• The content no longer fits this element
• This element now sticks out past the page

Scope the change

Every change is saved with a scope, shown as four fields above the style sections:

Field	What it pins the change to
State	default, or a state like hover — previewed as if it were active
Width	all widths, or one breakpoint
Part	the element itself, or a pseudo-element
Theme	default, dark or light

So a dark-mode fix stays in dark mode, and a mobile-only spacing tweak never reaches desktop. Apply to decides reach in the other direction: This element, or all matching elements sharing its class.

Restructure, carefully

Beyond styling, the Structure controls handle the four moves reviewers actually ask for: show one more of these, move before the previous one, move after the next one, take this out.

Leave the why

Each change has a Why field — one line for whoever lands it. Prefer it to a separate comment: the reason travels with the change instead of getting lost in a thread.

Save, compare, share

Changes autosave; the footer moves from Saving changes… to All changes saved, and Ctrl/⌘ S forces a save. Show the original / Show the branch flips between the two, and any single change can be switched off without deleting it.

If a teammate edited the same element first, the panel says so before you overwrite: Take theirs or Keep mine.

Copy link shares the branch. Anyone who opens it sees the page with the changes applied — no account, no install.

Hand it to a developer

Two exits, depending on who is landing the work:

• Copy prompt for an AI agent — one prompt describing every change in the branch, ready to paste into an agent working in your repository.
• The Design changes section in the project — style edits your team made straight on the site, ready to hand to a developer. Copy or download the CSS, compare two branches, or turn a single change into a task with Create a task from this change.

Next

• Catch what the change broke: audit accessibility and layout while you review.
• Check it at every width: review at any breakpoint.