Start here

Quickstart

Two commands. Open your app. Double-click a headline. That's the whole loop.

Install

npm i -D @rishi-thak/nextcanvas
npx nextcanvas init

Rather have your agent do it? The setup control on the home page has an agent tab that copies a ready-to-paste prompt for Claude Code, Cursor, or Codex. Or point your agent straight at /skill.md— the canonical setup doc, covering wiring, what's editable, and the gotchas.

init is idempotent — safe to re-run. It does two things for you:

Wraps your next.config with withCanvas() (boots the write-back server and injects the source-mapping plugin in development)
Mounts <NextCanvasOverlay /> in your root layout, gated to development

Run and edit

Start the app

Run npm run dev as usual. nextcanvas boots a small local server on port 3131 alongside Next.

Look for the toolbar

A floating nextcanvas bar appears in the corner. The master switch should be on. Leave Buttonsoff for edit mode — that's the default.

Double-click any static text

Hover to see the outline on editable elements. Double-click, type, press Enter (or click away) to commit. Your .tsx file updates on disk.

Psst. This docs site and the landing page are themselves a live demo when you run the nextcanvas repo locally. Try editing a headline on the home page.

Manual setup

Prefer to wire it by hand? init just performs these two edits:

1. Wrap your Next config

// next.config.js
const { withCanvas } = require('@rishi-thak/nextcanvas/next');
module.exports = withCanvas({
  // your existing config
});

2. Mount the overlay

// app/layout.tsx
import { NextCanvasOverlay } from '@rishi-thak/nextcanvas';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === 'development' && <NextCanvasOverlay />}
      </body>
    </html>
  );
}

Change the port

Set NEXTCANVAS_PORT if 3131 is taken. That single env var is enough — withCanvas inlines it for the overlay automatically.

NEXTCANVAS_PORT=4001 npm run dev