A visual editor for Astro sites.
midcode opens an Astro project on a live canvas and edits the markup of its .astro files: text, classes, attributes, new elements and their order. The frontmatter and anything in { } stay exactly as you wrote them. It runs astro dev with one Vite plugin of its own, and your astro.config is not modified.
Free for 3 days, no card. Then one payment, yours for life.
v1.1.2Today’s version opens Astro projects on the canvas and edits their React and Svelte islands. Editing the .astro files themselves ships with the next release.
- Status
- .astro editing in the next release
- Edits
- .astro files, and your islands
- Runs
- Your own astro dev
- Adds to your project
- Nothing
01/What you can do
What midcode does with Astro.
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 project folder
midcode starts astro dev with one Vite plugin that tags each element in your .astro files with its file and line.
Step 2: Edit on the canvas
Each change is written into the markup. What’s between --- and what’s inside { } is never rewritten.
Step 3: Publish
Review what changed, then commit and push in one step.
03/Good to know
The honest part.
What it doesn’t do
- Text that an expression produces ({title}) is edited where the value is written, not on the canvas.
- An element that an expression returns (inside a .map, a condition) can be restyled, but not moved or removed.
- Dragging in something that needs an import isn’t there yet for .astro files.
04/FAQ
Astro questions. Short answers.
Yes, from the CMS view: a folder of .md or .mdx files with front matter shows up as a collection, and each field is edited in the file.
A React, Preact, Solid or Svelte island is edited in its own file, like in any other project of that framework.
In a midcode.css file imported from the frontmatter of each layout. It holds the plain CSS for the classes midcode wrote.
05/Goes with
The rest of your stack.
Open your Astro project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.