Claude Code builds it. You finish it by eye.
midcode is a visual editor that runs Claude Code beside a live canvas of your site. Click an element and Claude gets its file and line as context, so “make this card wider” needs no explaining. Every file Claude changes shows on the canvas as it lands, as a diff you can undo, and the small things (a color, a line of copy, a padding) you change by hand without spending a token.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- Account
- Your own Claude Code sign-in
- Runs
- Chat, or Claude Code in a terminal
- Changes
- Diffs you can undo
01/What you can do
What midcode does with Claude Code.
Point instead of describing
The crosshair in the prompt takes the next thing you click: an element on the canvas, a CMS item, a text. Claude gets the file, the line and the components around it.
A chat made for the canvas
Attachments, @ context (the selection, your comments, the page), Claude Code’s own slash commands, its plan, and pickers for mode, model and effort.
Every change is a diff
Each file Claude writes goes into midcode’s history and the Publish list. One ⌘Z per tool call takes it back.
Comments become briefs
Pin notes to elements while you review, attach files, then hand Claude all of them with their file and line.
No tokens on a nudge
Moving a button 4 px or fixing a typo is a click on the canvas, not a prompt.
Or the terminal you know
Switch the panel to Terminal and it’s Claude Code’s own CLI in your project folder, with the selection pasted in as context.
02/How it works
Three steps. No new workflow.
Step 1: Open your project
midcode finds Claude Code on your Mac and uses the sign-in it already has.
Step 2: Point and ask
Select an element, write what you want. Claude works in your project folder and asks before it runs anything that needs permission.
Step 3: Finish by hand
Adjust what Claude built on the canvas, review everything in Publish, commit and push.
03/Good to know
The honest part.
What it doesn’t do
- The chat works with a Claude Console account or an API key. With a Claude subscription (Pro or Max), use the Terminal view, which runs Claude Code with your plan.
- midcode doesn’t sell or include model usage: the agent runs on your account.
04/FAQ
Claude Code questions. Short answers.
No. midcode has no AI subscription and no markup. Claude Code runs with your own account, and midcode’s license is a single payment for the editor.
A key is optional. If you add one, it’s checked against the API, kept encrypted on your Mac, and never leaves the app’s main process.
Yes. You both edit the same files. What Claude changes shows on the canvas as it lands, and what you change on the canvas is in the file when Claude reads it next.
Yes. Claude Code runs in your project folder, so it reads the same instructions and settings as when you start it from a terminal.
05/Goes with
The rest of your stack.
- Codex. OpenAI’s coding agent in the chat, with your own login.
- Cursor. Copy any element’s reference into Cursor, or run its CLI beside the canvas.
- Next.js. App Router projects, edited in their .tsx files. Metadata and pages too.
- GitHub. Branches, commits and push from the Publish panel. Never a force push.
Try midcode with Claude Code.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.