What works with what
Every framework and stack midcode opens, how much of each you can edit on the canvas, and which parts ship with the next release.
midcode opens any folder that holds a website. What changes from one stack to another is how much of the site it can link back to your code, and that decides how much you can edit by clicking.
There are three levels.
Marked while it runs. midcode starts your dev server with a plugin of its own that tells every element where it’s written. Everything on the canvas can be edited. This is React, Svelte, Vue, Astro and plain HTML. Laravel’s Blade views and Shopify themes are marked as they’re served too, each in its own way.
Found after it loads. The site is rendered by a server midcode can’t plug into (PHP, Django, Rails, a static site generator, Angular’s build). midcode reads the loaded page and finds each element in your templates. What it finds is edited like any other; what it can’t tell apart is left alone. See Sites a server renders.
View and comment. The site runs and shows at every breakpoint. You can check it, play it and leave comments for your agent, but not edit. This is what you get when midcode knows nothing about the stack, or when the project runs with its own command.
“Next” in the tables means it ships with the next release. In the version you can download today, those stacks open to view and comment when the folder has a dev script in its package.json or an index.html, and aren’t opened otherwise, unless the table says otherwise.
React
| Stack | Editing | Pages | Release |
|---|---|---|---|
| Next.js | Everything, in .tsx and .jsx files | Read from app/ and pages/. Add and remove | Released |
| React with Vite | Everything, in .tsx and .jsx files. Also Preact and Solid; Qwik is next | Type a path. Qwik City: the folders of src/routes, add and remove (next) | Released |
| React Router and Remix | Everything, in .tsx and .jsx files | Read from app/routes.ts or the route files. Add and remove is next | Released |
| TanStack Start | Everything, in .tsx and .jsx files | Read from the route files. Add and remove | Next (today: opens as React with Vite, with no pages listed) |
| Create React App, Gatsby, Docusaurus, Rsbuild | The project’s own JSX, in .js files too | Gatsby: src/pages. The others: type a path | Next |
“Everything” is text, styles, attributes, images, inserting, moving, duplicating and deleting elements, components with their props, variants and states, and variables.
Svelte, Vue, Astro, Angular
| Stack | Editing | Pages | Release |
|---|---|---|---|
| Svelte and SvelteKit | Text, styles, attributes, structure, component props, variants and states | SvelteKit: src/routes. Add and remove is next | Released |
| Vue with Vite | Text, styles, attributes, structure, component props, variants and states | Type a path | Next |
| Nuxt | Text, styles, attributes, structure, component props, variants and states | The files of pages/. Add and remove, once it has a pages/ folder | Next |
| Astro | .astro files: text, styles, attributes, structure, component props, variants and states. Islands as their own framework | src/pages. Add and remove | Next (today: its React, Preact and Solid islands only) |
| Vue CLI | The project’s own .vue files | Type a path | Next |
| Angular | Text, styles, attributes and structure in component templates, found after the page loads | The routes in *.routes.ts or a routing module | Next |
“Structure” is inserting, moving, duplicating and deleting elements. From the next release it also covers several selected elements at once (removed, wrapped in a stack or moved together) and ⌥-drag, which leaves a copy. In these files a value the language computes ({{ title }}, {title}) shows on the canvas and is changed in the code.
HTML and sites a server renders
| Stack | Editing | Pages | Release |
|---|---|---|---|
| Plain HTML | Text, styles, attributes, structure | Every .html file. Add and remove, at the top of the site | Next |
| Laravel | Blade views; Inertia pages as React or Vue; Livewire views | The GET routes of routes/web.php. Add and remove | Next (today: only with Vite, shown at a localhost address, not edited) |
| WordPress | A classic theme’s templates. A block theme has little to edit | Type a path | Next |
| PHP and Twig | What’s written in the templates | Type a path | Next |
| Django, Flask and FastAPI | What’s written in the templates | Django: urls.py. Flask: the @app.route lines. FastAPI: type a path | Next |
| Ruby on Rails | What’s written in the views | Read from config/routes.rb | Next |
| Hugo, Jekyll and Eleventy | Templates. In Markdown content, the words of headings, paragraphs and list items | The content files. Add and remove | Next |
| Shopify themes | Liquid, section settings, the store behind the theme | The theme’s templates, with the store’s products and collections | Next |
In these stacks, what the server fills in (a post’s body from the database, a product’s title, the output of a helper) is on the page but not in a template: it can’t be edited from the canvas.
A stack that isn’t in any table still opens. Any other stack lists what midcode recognises by its files, and how to tell it the command that runs your site. A site inside a bigger repository is found too: see Monorepos.
Features by kind of project
| Next.js | Other React | Svelte, Vue, Astro | HTML and server templates | |
|---|---|---|---|---|
| Text, styles, attributes, media | Yes | Yes | Yes | Yes |
| Insert, move, duplicate, delete | Yes | Yes | Yes | Yes |
| Insert’s interactive components | Yes | Yes | No: they’re React | No |
| Component props in the panel | Yes | Yes | Yes | No |
| Variants, states, variables | Yes | Yes | Variants and states (Vue and Astro: next). Variables (next) | No |
| Free canvas | Yes (Pages Router: next) | Vite + React, Preact or Solid (next) | Plain elements, not in Nuxt (next) | Plain elements in a folder of HTML (next) |
| Add and remove pages | Yes (new pages in the App Router) | React Router, Remix, TanStack Router, Qwik City (next) | SvelteKit, Nuxt, Astro (next) | HTML, Hugo, Jekyll, Eleventy, Laravel (next) |
| Site settings | Yes (App Router) | With an index.html (Vite, Create React App), and Docusaurus (next) | SvelteKit, Vue, Nuxt, Astro, Angular (next) | In the page’s or the layout’s <head>; not WordPress or Shopify themes (next) |
| CMS, Languages | Yes | Yes | Lists in .ts, JSON and Markdown files | JSON and Markdown files |
| Database (next) | Yes | Yes | Yes | Yes |
| Agent, Code, Comments, Publish | Yes | Yes | Yes | Yes |
Styles
How styles are written depends on one thing: whether the project uses Tailwind 4.
| Project | The panel writes | More |
|---|---|---|
| Tailwind 4 | Tailwind’s own classes, swapping only the one that changes | Tailwind CSS |
| Anything else: plain CSS, CSS modules, Bootstrap, Tailwind 3 | midcode’s mid: utilities, compiled to a midcode.css in your project | Without Tailwind |
What midcode doesn’t open
A site that isn’t code on your Mac: a Webflow, Framer, Wix or Squarespace site, or a WordPress site you only reach through its admin.
Native apps (React Native, Swift, Flutter). midcode shows web pages.
A Next.js or Vite project that writes JSX in
.jsfiles opens, but its elements aren’t marked: rename the files to.jsx.Parcel and Nuxt 2 projects open to view and comment only.
midcode itself runs on macOS only.
If you’re not sure
Open the folder. Nothing is added to a project by opening it, and the right panel says what you got: a file and a line when you click an element, or “preview and comments” when the site has no marks. If the project doesn’t start, Troubleshooting has the usual reasons.