Editing

Text

The core loop: double-click copy in the page, type a new value, commit. nextcanvas rewrites the matching JSX text in your source file.

How to edit

1. Make sure the toolbar is on and Buttons is off(edit mode). Clicks on the page won't navigate or fire app handlers.
2. Hover text — editable elements get an outline.
3. Double-click to enter edit mode. The caret lands in the text.
4. Type your change. Press Enter to save, or Escape to cancel. Clicking outside also commits.

What counts as editable text

Plain static text

A host element whose children are literal text — the classic case:

<h1>Generative AI rewires innovation</h1>
<p>Where operators get good at the pipeline.</p>

Double-click the rendered headline or paragraph. The matching string in the .tsx file updates in place, formatting preserved.

Mixed text + inline elements

Text that wraps bold, links, or other inline tags is editable too — you edit the surrounding runs; the inline elements stay locked:

<p>
  Still unsure?{" "}
  <a href="#register">reserve your seat</a>.
</p>

• You can change "Still unsure?" and the trailing period.
• You cannot delete the <a> or empty an entire text run — the edit is rejected and reverted with a toast.

Text inside components

Copy wrapped in a plain component tag is editable when it's literal text (or supported bound text) as the children:

<Reveal as="h2">Who you'll hear from:</Reveal>
<Link href="/chat">Talk to an AI partner</Link>

You edit what you see on the page. The write-back still targets the original JSX in your source — even if the component doesn't forward props.

Text interpolated with an expression

Copy that surrounds an interpolated value is editable — you change the static words while the {expression} is locked and preserved:

<h1>Hello {name}!</h1>
<p>You have {count} messages today</p>

• Edit "Hello" / "!" or "You have" / "messages today" — the run you type in is rewritten in place.
• The interpolated value ({name}, {count}) is not editable here — it comes from a variable, not static copy — so it stays exactly as written. To edit a value that is data, see Bound text.
• If an element is only an expression with no static words around it (<p>{name}</p>), it won't outline for text editing — there is nothing static to change.

Special characters & entities

Copy containing HTML entities — &, —, ’, … — edits normally. You type and see the real character (&, —, ’); nextcanvas re-encodes anything that needs escaping (&, <, >, {, }) so the JSX in your file stays valid.

Motion / animated tags

Elements like <motion.h1>, <motion.p>, and <motion.a> are editable the same way as plain h1 / p / a. Hero copy that lives on Motion tags is fair game.

Shared source, many instances

If the same JSX line renders many times (for example a card title inside a .map), editing one instance rewrites that shared source line — so every instance updates. That's intentional: there's only one string in the file.

What won't open an editor

• An element that is only an expression, with no static words to edit: <p>{SITE.name}</p> (but see Bound text — many of these are editable as data).
• The interpolated value itself inside mixed copy — you edit the words around {count}, not the number it resolves to.
• Purely dynamic runtime strings (countdown digits, form errors, chat bubbles)
• Namespaced or deeply nested member tags beyond simple motion.*

For data-driven single-expression children like {speaker.name}, see Bound text.