A visual editor for Nuxt sites.
midcode opens a Nuxt project on a live canvas and edits the templates of its pages, layouts and components. It starts the Nuxt dev server with a layer of its own that tags each element with its file and line, so your nuxt.config isn’t touched, and every change is written into the .vue file it belongs to.
Free for 3 days, no card. Then one payment, yours for life.
v1.1.2Today’s version opens Nuxt projects to check every breakpoint and leave comments for your agent. Editing on the canvas ships with the next release.
- Status
- Editing in the next release
- Edits
- The template of .vue files
- Runs
- nuxi dev, with a layer added
- Tried with
- Nuxt 4
01/What you can do
What midcode does with Nuxt.
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 nuxi dev extended with its own layer, kept outside your project.
Step 2: Edit on the canvas
Each change is written into the template and shows on every breakpoint.
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 comes from {{ }} is edited where the value is written, not on the canvas.
- Component props aren’t edited from the panel yet.
04/FAQ
Nuxt questions. Short answers.
No. What midcode needs comes from a Nuxt layer it passes when it starts the dev server. Your config and your modules stay as they are.
In a midcode.css file imported from app.vue, with the plain CSS for the classes midcode wrote.
05/Goes with
The rest of your stack.
Open your Nuxt project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.