A visual editor for Vue apps.
midcode opens a Vite + Vue project on a live canvas and edits the <template> of its single-file components: text, classes, attributes, new elements and their order. Your <script> and anything in {{ }} are left exactly as written. It runs Vite with your config and one plugin of its own.
Free for 3 days, no card. Then one payment, yours for life.
v1.1.2Today’s version opens Vue 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
- Vite, with your config
- Adds to your project
- Nothing
01/What you can do
What midcode does with Vue.
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 Vite with a config of its own that loads yours and tags each element of your templates with its file and line.
Step 2: Edit on the canvas
Each change is written into the template. Hot reload shows it 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.
- A component’s props aren’t edited from the panel yet: you select its elements, not the instance.
- Dragging in something that needs an import isn’t there yet for .vue files.
04/FAQ
Vue questions. Short answers.
Yes. midcode edits the template and doesn’t read or rewrite your script, so it works with either style.
It edits the static class attribute. A :class binding is an expression, and midcode leaves expressions alone.
05/Goes with
The rest of your stack.
- Next releaseNuxt. Pages, layouts and components, edited in their .vue files.
- SvelteKit. SvelteKit and Vite + Svelte, edited in their .svelte files.
- Tailwind CSS. The panel reads your @theme and writes your own utilities.
- Plain CSS & Bootstrap. No Tailwind? midcode writes its own utilities and compiles them to CSS.
Open your Vue project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.