Reference
What you can edit
A practical map of what nextcanvas will offer an editor for — and what it will leave alone. When something isn't editable, there's usually no outline on hover.
Text — yes
| In your JSX | On the page |
|---|
<h1>Hello</h1> | Double-click the headline |
<p>Hi <strong>there</strong></p> | Edit surrounding runs; inline tags stay |
<Reveal as="h2">Title</Reveal> | Double-click the title |
<motion.h1>Hero</motion.h1> | Same as a plain h1 |
<Link href="/x">Label</Link> | Edit the label (and href via attributes) |
Bound text — yes
| In your JSX | What gets rewritten |
|---|
{s.name} in a .map | That object's name in the array |
{s.name ?? s.role} | Whichever side the UI is showing |
{t} as a map element param | That string in the array |
{cfg.title} / {COUNCIL_COPY.eyebrow} | The object property (local or imported file) |
{loading ? "Sign in" : "…"} | The string arm currently showing |
{x ?? "—"} / {job?.service} | Literal fallback or optional-chain field |
{msg.text} next to other siblings | Wrapped in a span; data entry via value-match |
{session.title} inside a child component | The mapped data entry, via the prop |
{q} as a component prop from q={f.q} | faqs[].q (etc.) |
Attributes — yes
- Literal:
href="/x", src="…", alt, title, placeholder, aria-label - Bound bare identifier:
href={GITHUB} — choose all references or just this one
Styles — yes, with limits
- Literal
style={{ ... }} — color, background, font size/weight, text align, padding - Not className / Tailwind utilities
- Not
style={variable}
No outline / won't edit
| Pattern | Why |
|---|
Hi {name} mixed in one parent | Ambiguous which part is source text |
{items[i].x}, {fn()} | Can't resolve a single string leaf |
| Ternary arms that aren't string literals | Only {cond ? "A" : "B"} style is editable |
| Live clocks, chat streams, validation errors | Runtime-only — not in source as literals |
Foo.Bar.Baz / namespaced tags | Not stamped |
| Duplicate bound values across entries | Refused on commit (ambiguous) — make the string unique |
Bundlers & platforms
| macOS / Linux | Windows |
|---|
| webpack | Works | Works |
| Turbopack | Works | Prefer next dev --webpack for now |
Production
Deploy freely. In production builds nextcanvas is a complete no-op: no overlay, no stamps, no write-back server. Your users never see it.