A visual editor for the Next.js site you already have.
midcode is a macOS app that opens a Next.js project on a live canvas and edits it visually. It starts your own next dev, shows the site at every breakpoint, and writes each change (text, Tailwind classes, images, layout, new sections) into your .tsx files as a minimal diff. There is nothing to install in the project and no config to change.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available, the most complete
- Edits
- .tsx and .jsx files
- Runs
- Your own next dev
- Adds to your project
- Nothing
01/What you can do
What midcode does with Next.js.
Click to code
Select any element and read where it’s written: the file and the line. Copy that reference into your agent, or open the file on that line.
Edit text in place
Double-click a heading, a button or a paragraph and type. The new text replaces the old one in the file, and nothing else in it changes.
Styles from your Tailwind theme
Type, color, spacing and radius come from your @theme tokens. midcode swaps classes in place, per breakpoint, per hover state, per variant.
Components with variants and states
Open a component on its own canvas: variants as columns, Hover, Pressed and Focus as rows. Props are read from your TypeScript types and edited in the panel.
Pages and site settings
Create, reorder and remove pages. Titles, descriptions, icons and social images are written as Next metadata: export const metadata, or generateMetadata on a dynamic route.
Build with the Insert panel
Frames, stacks, grids, text, forms, whole sections and icons, each with a real preview. Drag one in and it’s written into your code.
02/How it works
Three steps. No new workflow.
Step 1: Open the project folder
midcode starts next dev for you, with a loader that tags every JSX element with its file and line. The loader is added in memory when the server starts: your next.config stays as it is.
Step 2: Edit on the canvas
Click, double-click, drag. Each change is written to the file as you make it, Fast Refresh shows it on every breakpoint, and ⌘Z undoes it.
Step 3: Publish
Review the changed files, then commit and push in one step. On a repository connected to Vercel, that push is a deploy.
03/Good to know
The honest part.
What it doesn’t do
- macOS only.
- Text that comes from a variable or a fetch is edited where the string lives: midcode finds it in your arrays and data files, but not in a remote API.
Coming next
- A table and SQL editor for the database behind the site (Postgres and SQLite first).
04/FAQ
Next.js questions. Short answers.
No. midcode starts next dev with its own loader added in memory. Your next.config, your package.json and your lockfile are not touched. The only folder it creates is .midcode, for comments and layer names, which you can commit or ignore.
Yes. midcode edits the source files, so it doesn’t matter whether a component renders on the server or the client. In a client component, page metadata goes in a layout beside it.
Only the lines you changed. midcode never reformats or reprints a file: a text edit is the new string, a style edit is the classes that changed.
No. With Tailwind CSS 4, midcode writes your own utility classes. Without it (plain CSS, CSS modules, Tailwind 3), it writes its own prefixed utilities and compiles them to a plain CSS file in your project.
05/Goes with
The rest of your stack.
Open your Next.js project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.