A visual editor for SvelteKit, in your .svelte files.
midcode opens SvelteKit and Vite + Svelte projects on a live canvas and edits their .svelte files directly. It reads each component with the Svelte compiler your project already has, so text, static classes, attributes, new elements and reordering are written exactly where they live in the markup.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- Edits
- .svelte files
- Reads with
- Your project’s Svelte compiler
- Adds to your project
- Nothing
01/What you can do
What midcode does with SvelteKit.
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.
Props in the panel
The props a component declares with $props() show up as controls on each place it’s used.
Insert, as Svelte
What you drag in from the Insert panel is converted to Svelte markup before it’s written: class, not className.
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 the dev server with a plugin that runs before Svelte’s own and tags each element with its file and line.
Step 2: Edit on the canvas
Each change is written into the .svelte 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
- The component canvas with variants and states, and turning a value into a prop from the canvas, are JSX only for now.
- A class that’s computed in an expression is left alone: midcode edits the static ones.
04/FAQ
SvelteKit questions. Short answers.
midcode uses the svelte/compiler installed in your project to read your files, so it follows the version you’re on. Props are read from $props().
Into static/, SvelteKit’s public folder, with the reference rewritten in the markup.
They keep working. midcode’s panel writes utility classes on the element: your Tailwind classes, or its own prefixed ones compiled to a CSS file imported in +layout.svelte.
05/Goes with
The rest of your stack.
- Next releaseAstro. .astro pages and layouts, edited in their markup.
- Next releaseVue. Vite + Vue apps, edited in the template of each .vue file.
- 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 SvelteKit project.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.