A visual editor for sites built in code, on macOSv2.1.0 is out
The mid between
code and no-code.
midcode opens your project on a live canvas. Change anything by hand, and the edit lands in your code as a clean diff.Click anything to see where it lives in the code, change it by hand, and the edit lands in your source files as a clean diff.
- Works with
- React, Vue, Svelte, Astro, Shopify and more
- Writes to
- Your source files
- Account
- None needed
- Runs
- Locally, on your Mac
Why midcode
Your agent builds the site. You finish it by eye. Click an element and midcode points to hero.tsx:137. Change the type, swap an image, fix a line of copy, and it lands in your file as a +1 −1 diff. No tokens spent on a nudge.
01/Features
Design on the real thing. No mockups, no export step.
midcode edits the site you already have, in the same files your agent works in. What you click is what ships.
Click to code.
Select any element and see exactly where it’s written: the file, the line, and every component it sits inside. Copy the reference straight into your agent.
Every breakpoint, live.
Your real site runs on an infinite canvas at Desktop 1440, Tablet 768 and Phone 390, full page height, side by side. Select once, see it in all three.
Styles from your tokens.
Type, color, spacing and radius come from your Tailwind @theme. midcode swaps classes in place, so the diff is the edit and nothing else.
Comments for your agent.
Pin a note to any element, attach files, then copy a brief with the file and line that Claude Code or Cursor can act on. Saved in your project’s .midcode folder.
Components, cell by cell.
A component opens on a canvas of its own: variants as columns, states as rows. What you change in a cell is written for that variant and state, in the component’s file.
Layers that name themselves.
Apple Intelligence turns a wall of divs into Hero, Client logos and Footer. It runs on your Mac: offline, free, no tokens spent.
And the details
- Double-click any text to edit it
- Replace images, videos and backgrounds
- Insert sections, forms and icons from a panel
- Draw and drop on a free canvas, off the page
- Snapping, rulers and guides
- Turn a text or a style into a component prop
- Lists show the field each text comes from
- Site title, favicon and social image
- Pages tree with dynamic routes
- Edit your design tokens in the app
- Your code beside the canvas, with a terminal
- Undo for every single edit
02/The whole site
Not just the page. What’s behind it, too.
A site is its content, its data, its languages and the way it ships. Each has a place in midcode, next to the canvas, working on the same files.
01Agent
Your agent, in the same window.
Claude Code, Codex, Gemini CLI or OpenCode, signed in with your own account, in a chat made for midcode. Point at an element, a CMS item or a table and say what you want.
- Every file it changes shows as a diff, and ⌘Z undoes it
- Its plan, its tool calls and what it asks permission for
- The midcode skill teaches it to write code you can keep editing
02CMSBeta
The content already in your files.
midcode finds the collections your project keeps: arrays in a module, JSON lists, folders of Markdown. Edit them as a table, item by item, and each change is written back as the smallest diff.
- Field types read from your data
- No service to sign up for, no schema to migrate to
- A list on the page leads to the item it draws
03DatabaseBeta
The data behind the site.
The Postgres or SQLite database your project already points at, found from your .env. Tables as tables, rows you edit and save together, and a SQL editor that knows your columns.
- A table change shows its SQL first, and stays as a migration
- Who signs in and which pages ask for it, read from your code
- Environment variables, charts, export and import
04Languages
Every text, in every language.
midcode reads the languages your site has, from message catalogs or from the code, and lays each text out beside its translations. The canvas switches to any of them.
- Fill in what’s missing with Apple Intelligence, on your Mac
- Or copy it out as a brief for your agent
- Add a language and every file that lists them follows
05Branches
Branch, review, publish.
Switch or create a branch from the top bar. Publish lists what you changed and what your agent touched; tick what goes, and it’s committed and pushed in one step.
- Pushes as the GitHub account that has access
- Never forces, never takes a file you didn’t tick
- On a repo connected to Vercel, follow the deploy from there
06Analytics
See who visits.
Pick Vercel Analytics, Plausible, Umami or Google Analytics in Site settings and midcode writes its script where your site keeps its head. With Plausible or Umami, the visits show right there.
- Nothing to install, and midcode sends nothing anywhere
- Your API key stays encrypted on your Mac
- Title, description and social image in the same place
03/Works with
The stack you already have. Nothing to migrate.
midcode opens the project that’s on your Mac and runs it the way you do. Every framework, platform, agent and service here has a page that says what you can edit.
See every integrationFrameworks
- Next.js
- React + Vite
- React Router
- Remix
- SvelteKit
- Astro
- Vue
- Nuxt
- Plain HTML
- Laravel
- WordPress
- PHP
- Django
- Rails
- Hugo
- Jekyll
Platforms
New project
Or start with nothing at all.
Pick what to build with and midcode sets it up with the framework’s own tool, Tailwind included, and opens it on the canvas. Begin from a blank page, or from a starter designed for midcode.
Open your own project. It takes a minute, and it’s free for 3 days.
04/How it works
Three steps. No new workflow.
- ~/sites/studio-web
Step 1: Open a project folder
Point midcode at your project folder. It starts the dev server and lays out every breakpoint. Nothing to configure, nothing uploaded.
- hero.tsx +1 −1
Step 2: Edit on the canvas
Click, double-click, adjust. Each change is written into your source files as you make it, and every edit can be undone.
- git push → vercel
Step 3: Publish
Review what changed, then commit and push in one click. Your repo stays the single source of truth.
05/Install
Get midcode.
Download the .dmg and drag midcode to Applications, or install it with Homebrew. Free for 3 days, then one payment.
License
$119, launch price. Regular price:One payment, yours for life. Every update included, on up to 3 Macs. Try it free for 3 days first.
Homebrew
Rather use the terminal? One command installs it; it updates itself from then on.
brew install --cask agusdellaquila/midcode/midcode06/FAQ
Questions. Short answers.
Only the lines you edit. Each change is written in place as a minimal diff: midcode never reformats or reprints your files, and every edit can be undone with ⌘Z.
midcode edits Next.js, Vite (React, Preact, Solid), React Router, Remix, SvelteKit, Vue, Nuxt, Astro, Angular and plain HTML projects on the canvas, styled with Tailwind or without it. It also edits Laravel’s Blade views, Shopify themes, and the templates of sites a server renders: WordPress, PHP, Django, Rails, Hugo and Jekyll. Anything else with a dev server opens too, to check every breakpoint and comment. midcode runs your project’s own dev server, so what you see is your real site. The full list is at midcode.app/integrations.
No. There’s nothing to install or configure, and midcode doesn’t touch your project’s config. Comments and layer names live in a .midcode folder you can commit or ignore.
No. midcode runs locally on your Mac, and Publish uses the git credentials your Mac already has. Connecting GitHub or Vercel is optional: GitHub makes the push go out as the account that has access, and Vercel lets you follow the deploy right after you publish.
Your agent and midcode edit the same files. Changes your agent makes show up on the canvas as they land, and comments copy out as briefs with the exact file and line.
Yes: midcode opens a Liquid theme folder, shows your store’s preview at every breakpoint and writes each change into the theme’s .liquid, JSON and locale files. Section settings are in the right panel, and a Store view, in beta, manages your products, orders and the rest of the store’s data through your own Shopify CLI.
The data, yes, in beta: a table editor and a SQL editor for the Postgres or SQLite database your project already points at. You change rows and tables there, with the SQL shown before it runs, and see who signs in to your site. The code that reads the database or signs people in is your agent’s to write: midcode puts the request in words, with what it knows about the project.
It’s free to try for 3 days. Then it’s one payment of $199, yours for life with every update, on up to 3 Macs. The first 50 get it for $119.
Design in the code you already have.
Open a project, click anything, ship the change. Your agent handles the big moves. You handle the details.