A visual editor for React Router apps.
midcode opens a React Router project on a live canvas, with each route as a page you can go to. It runs the project’s dev server with your own Vite config plus one plugin, and writes every edit to text, classes, images and layout into the route or component file it belongs to.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- Edits
- .tsx and .jsx files
- Runs
- Your dev server, on Vite
- Adds to your project
- Nothing
01/What you can do
What midcode does with React Router.
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.
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 reads your routes, starts the dev server with your Vite config and its own plugin, and lays out every breakpoint.
Step 2: Edit on the canvas
Move between routes from the top bar. Each change is written to the file as you make it.
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 routes and editing meta from the app are Next.js only for now: you write those in code, or ask your agent.
04/FAQ
React Router questions. Short answers.
In a midcode.css file next to root.tsx, imported there. It holds the plain CSS for the utilities midcode wrote, and nothing else in your styles changes.
Yes, they run as they always do: the canvas shows your real app from your real dev server. midcode edits the markup, and the text that’s written in your files.
05/Goes with
The rest of your stack.
Open your React Router project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.