Editing

Attributes

Links, images, and labels often need a URL or string tweak without opening the file. Hover an element to open the attribute chip, then edit from the panel.

How to edit

Hover a stamped element that has an editable attribute.
Click the small attribute chip that appears (separate from the style selection).
The attribute panel lists editable fields. Change a value and commit.

Hover outlines, the chip, and double-click text editing all stay available whether Buttons is on or off. Style selection (single-click) only happens when Buttons is off.

Which attributes

These are editable when present as a string in JSX:

href
src
alt
title
placeholder
aria-label

Literal vs bound

Literal — rewrite in place

<a href="#register">Reserve your seat</a>
<img src="/speakers/bob.png" alt="Robert Cooper" />

Changing the value updates that attribute's string in the JSX. Quoting style is preserved.

Bound identifier — pick a scope

const GITHUB = 'https://github.com/rishi-thak/nextcanvas';

<a href={GITHUB}>Star on GitHub</a>

Bound attributes show a var badge in the panel. On commit you choose:

All references— rewrite the variable's declaration (const GITHUB = '…'). Every use of that variable picks up the new value.
Just this one — leave the variable alone and inline a literal on this element only (href={GITHUB} → href="new").

Undo caveat."Just this one" is a one-way transform (the identifier is gone from that JSX). Undoing it may not restore {GITHUB}and can error-toast. Prefer forward edits; use "all references" when you want a clean shared change.

What isn't offered

Member or call expressions: href={cfg.url}, href={fn()}
Identifiers imported from another module, when you choose all references — you'll get a hint to use just this one instead
Attributes outside the whitelist above