A visual editor for React apps built with Vite.
midcode opens a Vite project written in React, Preact or Solid on a live canvas and edits its JSX visually. It starts Vite with your own config plus one plugin of its own, so you see your real app at every breakpoint, and each change to text, classes, images or layout is written into the component’s file.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- Edits
- .tsx and .jsx files
- Runs
- Vite, with your config
- Adds to your project
- Nothing
01/What you can do
What midcode does with React + Vite.
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.
Components with variants and states
Edit a component alone on its own canvas: variants as columns, Hover, Pressed and Focus as rows. Turn a text, an image or a color into a prop with one click.
Build with the Insert panel
Frames, stacks, grids, text, forms, whole sections and icons, each with a real preview. Drag one in and it’s written into your code.
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.
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 adds one plugin, the one that tags each JSX element with its file and line. That config lives outside your project.
Step 2: Edit on the canvas
Each change is written to the file as you make it. Vite’s 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
- Creating pages and editing site metadata from the app are Next.js only for now.
- A project that needs its own start (env files, another process, a fixed port) starts with your dev script instead, and midcode says so in the log.
04/FAQ
React + Vite questions. Short answers.
No. midcode writes a small config of its own, outside your project, that imports your vite.config and adds one plugin. Your file is never modified.
Yes. Any Vite project that writes its interface in JSX is edited the same way, in its .tsx or .jsx files.
It’s edited all the same. midcode writes its own prefixed utilities (mid:p-6, mid:md:flex) and compiles them to a plain CSS file imported next to your app’s entry. Your own classes are never touched.
05/Goes with
The rest of your stack.
- React Router. Framework-mode apps: routes as pages, edited in their JSX.
- Next.js. App Router projects, edited in their .tsx files. Metadata and pages too.
- 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 React + Vite project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.