nextcanvas turns your locally-running app into an editable canvas. double-click any text, type a new value, and it is written straight back into your source file. fast refresh does the rest.
a ready-to-paste prompt for claude code, cursor, or codex
fyi, this entire page is a live demo running the real overlay. flip the switch in the toolbar, then double-click any text. changes stay in your browser — reload to reset.
integration
install it, run one command, and start editing. init wraps your next.config and mounts the overlay for you.
add it as a dev dependency. it ships prebuilt, so there is no build step on your end.
it wraps your next.config with withCanvas and mounts the overlay in your root layout. then run next dev.
$ npm i -D @rishi-thak/nextcanvas $ npx nextcanvas init ✓ wrapped next.config.ts with withCanvas ✓ mounted <NextCanvasOverlay/> in app/layout.tsx → run `next dev` and double-click any text
// wired for you by `npx nextcanvas init` import { withCanvas } from '@rishi-thak/nextcanvas/next'; export default withCanvas(nextConfig);
how it works
a compile-time stamp maps every element back to its exact line of source. the rest is a single round-trip.
double-click text in the browser. the overlay reads the element data-loc stamp.
it posts the file, line, old and new text to the local write-back server.
ts-morph does a formatting-preserving ast edit and saves your source file.
next.js fast refresh re-renders instantly. no websocket, no reload.
features
any static text becomes editable inline. no side panels, no edit mode to toggle — just click and type.
edits land in your real .tsx file through a formatting-preserving ast edit. your code and style are untouched.
edits are one-way posts; the browser update comes for free from next.js fast refresh. no socket to maintain.
the source stamp runs inside swc, so webpack and turbopack both work. zero extra config, next/font intact.
everything is gated to development and compiles out completely in production builds. ship with confidence.
elements are mapped to source at compile time, not from fragile react internals. it just keeps working.
install once, edit forever. nextcanvas is a dev dependency that stays out of your way and out of production.