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, their order, and the props a component is given where it’s used. Your <script>, your <style> and anything in {{ }} stay as you wrote them: midcode adds to a <script setup> only what an edit asks for (the import of a component you drag in, a variant prop). It runs Vite with your config and one plugin of its own.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- 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.
Components with variants and states
A component is selected where it’s used, with its props as typed controls read from its defineProps. Open it on its own canvas: variants as columns, Hover, Pressed and Focus as rows.
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.
- Variants aren’t written for a component on the Options API, or one that lists its props as defineProps([...]).
- A component you drag in gets its import in <script setup>. In a component written with the Options API, where an import alone isn’t enough, that insert is refused.
- Vue Router’s routes aren’t read: the page menu lists the home page, and any other route opens by typing its path.
04/FAQ
Vue questions. Short answers.
Yes. Editing the template works with either style, and a component’s props are read from defineProps or from the props of a plain <script>. The two things midcode writes in a script, the import of a component you drag in and a variant prop, go in <script setup>.
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.
- Nuxt. 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.