A visual editor for Remix apps.
midcode opens a Remix project that runs on Vite and edits it on a live canvas. Your routes are the pages, your loaders run as usual, and every change to text, classes, images or layout is written into the JSX of the route or component as a minimal diff.
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 Remix.
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.
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 the dev server with your Vite config and one plugin of its own, kept outside the project.
Step 2: Edit on the canvas
Click, double-click, drag. Each change lands in the file 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
- Remix on the classic compiler (before Vite) opens to view and comment, without editing.
04/FAQ
Remix questions. Short answers.
No. A Remix app on Vite is edited as it is. If you do move later, midcode opens the React Router project the same way.
No. The plugin that tags elements only runs in the dev server midcode starts. Your build, your config and your dependencies stay the same.
05/Goes with
The rest of your stack.
Open your Remix project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.