Documentation

Edit your Next.js app in the browser.

nextcanvas turns a locally-running App Router app into an editable canvas. Double-click text, tweak attributes, restyle elements — every change writes straight back into your source. Fast Refresh does the rest.

Dev-only. In your app, nothing from nextcanvas ships to production — the overlay, the write-back server, and the source stamps all gate on NODE_ENV === 'development'.

Want to try it before installing? The home page runs the real overlay so you can play with it in the browser. Flip the nextcanvas switch in the toolbar and double-click any text. Those edits are browser-only and a reload clears them — that page is wired to a stub backend rather than a write-back server.

What you can do

Text — double-click static copy, including text mixed with inline elements and text inside wrappers like Reveal or motion.h1.
Bound text — edit values that render from data ({speaker.name}, map items, config objects), string ternaries like loading CTAs, and {x ?? "—"} fallbacks.
Attributes — hover the chip to change href, src, alt, and friends.
Styles — single-click an element and tune color, size, weight, padding, and more via inline style.

Requirements

Next.js 16.2+ with the App Router
A local next dev session (webpack or Turbopack on macOS/Linux)
On Windows with Turbopack issues, use next dev --webpack

Edit your Next.js app in the browser.

Choose a path

Quickstart

Edit text

Edit bound text

Use the toolbar

What you can do

Requirements