A visual editor for plain HTML.
midcode opens a folder of .html files, with no framework and no build step, and edits it on a live canvas. It serves the folder itself and reloads when a file changes. Text, classes, attributes, images and the order of elements are written into the .html file, with the rest of the file left byte for byte as it was.
Free for 3 days, no card. Then one payment, yours for life.
v1.1.2Today’s version opens HTML sites to check every breakpoint and leave comments. Editing on the canvas ships with the next release.
- Status
- Editing in the next release
- Edits
- .html files
- Runs
- midcode’s own static server
- Needs
- No Node, no build
01/What you can do
What midcode does with Plain HTML.
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.
Every breakpoint at once
Your site runs live at Desktop, Tablet and Phone, side by side, at full page height. A style set on one breakpoint is written for that breakpoint.
Swap images and video
Drop a new image on an element, or paste one with ⌘V. midcode copies the file into your project and rewrites the reference.
Drag to reorder
Move an element before, after or inside another one, on the canvas or in Layers. The markup moves in the file, with the comment above it.
Undo for every edit
Each change is one entry in the history and one line in Publish. ⌘Z takes it out of the file again.
02/How it works
Three steps. No new workflow.
Step 1: Open the folder
midcode serves it on your Mac and lists every .html file as a page.
Step 2: Edit on the canvas
Each change is written into the file. The page reloads on every breakpoint.
Step 3: Publish
If the folder is a git repository, review what changed, then commit and push in one step.
03/Good to know
The honest part.
What it doesn’t do
- Markup that a script builds in the browser is edited in that script, not on the canvas.
04/FAQ
Plain HTML questions. Short answers.
midcode writes its own prefixed utilities on the element (mid:p-6) and keeps a midcode.css at the root of the site with their plain CSS. Each page gets one <link> to it. Your own stylesheets aren’t edited.
No. midcode’s reader is tolerant on purpose: unclosed tags and odd markup stay as they are, and only the range you edited changes.
05/Goes with
The rest of your stack.
- Plain CSS & Bootstrap. No Tailwind? midcode writes its own utilities and compiles them to CSS.
- Next releaseAstro. .astro pages and layouts, edited in their markup.
- GitHub. Branches, commits and push from the Publish panel. Never a force push.
- Cursor. Copy any element’s reference into Cursor, or run its CLI beside the canvas.
Open your Plain HTML project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.