More time to try it
- Need more time with the trial? Ask, and you can get a code that keeps it running a few more days. Paste it where a license key goes.
Changelog
What’s new in midcode
New features, improvements and fixes, release by release.
- v2.1.2Latest
Typing stays typing, and new files land where your site serves them
- Typing a P in a text field (feedback, your agent’s prompt, a field on your page) no longer opens or closes Preview, and typing ! no longer zooms to fit. P on the canvas still opens Preview.
- A replaced image, pasted or dropped media, Insert’s Image, Video and Audio, and a sticker’s SVG now go into the folder your site serves as it is, under the address it has there: plain HTML, Hugo, Jekyll, Flask, Django, WordPress and Shopify themes (linked with asset_url) and Angular, not only public/. A site where midcode can’t tell says so instead of writing a file nothing serves.
- In the Database filter and in a new link style, picking from a list keeps the popover open, and Esc closes the list before the popover.
Design systems from Markdown, fonts loaded for you, and a bigger interface
- Import a design system from a Markdown file (a DESIGN.md, a style guide an AI wrote): its colors, fonts, text styles, text sizes, radii and shadows become your project’s theme. Each one is shown before anything is written, any can be left out, and the whole import is one edit.
- New project can start from a design system: choose the Markdown file and the project is made with its tokens in the theme and the file kept as DESIGN.md, where your agent reads it.
- Fonts are loaded for you. A font the theme names and the site doesn’t load is brought into the project with its @font-face rules: from your Mac when it’s installed (packed as .woff2), else from Google Fonts, upright and italic. Each font that isn’t loaded has a button for it in Styles.
- Export the theme as a DESIGN.md: into the project, to a file or to the clipboard. A project that already has one gets it brought up to date, with its words kept.
- Styles lists the theme’s text sizes, radii and shadows too, each edited in place.
- Padding, gap and radius by hand on the canvas: drag the bar in a side’s padding, the one in a gap, or the dot at a corner. ⌥ sets the opposite side too (or that corner alone), ⌥⇧ all four sides.
- Interface size: draw midcode’s own interface bigger or smaller, from Settings, with ⌥⌘+ and ⌥⌘−, or with ⌘+ and ⌘− wherever there’s no canvas on screen.
- New project: ask for a version of the framework (Next.js 15, Vite 6, Laravel 12…) instead of the latest.
- Without Tailwind, a text style set in one of your fonts and a link style in one of your colors now take them.
- The Styles list follows an undo, and feedback that can’t be sent opens a mail to the right address.
Every stack, the data behind the site, and a new interface
- A new interface, built on one design system: quieter, denser, with icons where there were sentences. Layers and assets are on the left, your agent and the style panel on the right, and Design, Code, CMS, Database and Store are places in the top bar (⌘1 to ⌘5).
- Many more stacks are edited on the canvas: Vue, Nuxt, Astro, plain HTML, Angular, Solid, Preact and Qwik; Laravel’s Blade views, WordPress themes, PHP, Django, Flask, Rails, Hugo, Jekyll and Eleventy templates; and sites built with webpack or Rspack (Create React App, Vue CLI, Gatsby, Docusaurus, Rsbuild). Any other folder opens too: tell midcode the command and the address once.
- Shopify themes: Liquid edited on the canvas against your store’s preview, each section’s settings and blocks in the right panel, and Store (beta): products, orders, customers, discounts, pages and menus, through your own Shopify CLI.
- Database (beta): the Postgres or SQLite database your project points at, beside its code. Tables as tables, rows you edit and save together, a SQL editor with charts, who signs in, environment variables, and the whole database out to a file or in from one.
- Table changes show their SQL before they run and are saved as a migration in your project. With Prisma, midcode edits schema.prisma and writes the migration the way Prisma would.
- New project, from the hub: React, Vue, Svelte, Angular, Solid, Astro, plain HTML, PHP, Python or Shopify, set up by each framework’s own tool with Tailwind, and ready on the canvas.
- Marketplace: free starters, sections and prompts made for midcode. Begin a project with a designed first page, drop a section from the Insert panel, or send a prompt to your agent.
- The hub, organized: groups, pins, search and an order of your own. Nothing moves on disk.
- Instances and lists work like in Framer: a component used on a page is one thing, with what the page gives it in the panel, and an element drawn once per item is one layer whose texts show the field they come from, with the way to the CMS, the table or the store that holds it.
- Components outside React: Vue and Astro components get their own canvas with variants and states, and variables work in Svelte, Vue and Astro.
- Analytics in Site settings: pick Vercel Analytics, Plausible, Umami or Google Analytics and the script is written into your site. With Plausible or Umami, the visits show in midcode.
- Site settings outside Next.js: title, description, language, favicon and social image, written where each site keeps its head (Vite, Astro, SvelteKit, Nuxt, Angular, plain HTML, Docusaurus and server-rendered layouts).
- The free canvas in more projects: Vite apps, Next’s Pages Router, and Vue, Svelte, Astro and plain HTML sites. Pages are added and removed in Astro, SvelteKit, Nuxt, Remix, React Router and more, each the way its framework keeps them.
- Markdown content (Hugo, Jekyll, Eleventy) is edited on the canvas: change a heading or a paragraph and the .md file changes.
- The midcode skill, added from the Agent panel: it teaches Claude Code, Codex, Gemini, Cursor or OpenCode to write code you can keep editing on the canvas.
- Monorepos: open the repository and midcode opens the site inside it, with the workspace’s package manager and dependencies.
- A steadier canvas: the dev server restarts by itself when your Vite or Astro config changes, a frame that failed to load loads again, Preview follows the server to a new port, and hover styles stay quiet while you design (they play in Preview).
- “Open code” opens every file midcode edits, templates included.
HTTPS dev servers, Laravel and reports
- Dev servers on HTTPS now start: a project that serves with its own local certificate opens on the canvas like any other, whether midcode starts it or your dev script does.
- Laravel with Vite: the canvas shows your site at its APP_URL (served by Herd, Valet or php artisan serve) with Vite running beside it, and tells you when the site isn’t being served.
- When a project doesn’t start, “Send report” sends what it takes to fix it: the log, how the project is set up and your Mac’s model, all shown before it goes. “Copy report” gives you the same text to send any other way. No source files, nothing from your .env.
- A start that takes too long offers the log and the report instead of spinning in silence.
- On a start error, the log button now hides and shows the log, and the log no longer covers the error.
Snapping, variables and a steadier start
- Projects that won’t start midcode’s way now start with your own dev script (a SvelteKit or Vite project that needs its env files, another process or a fixed port), and midcode tells you why in the log.
- Snapping and guides: what floats lines up with what’s around it, its edges and centers, the breakpoints and your guides, and shows the distance to its neighbours. Rulers on the canvas (R): drag a guide out of one, click it and press ⌫ to remove it.
- Option-drag to duplicate. ⌘C and ⌘V never paste on top of the original: the copy goes beside it.
- Several selected: right-click, copy, duplicate, delete and ⇧A (wrap in a stack) work on all of them, and dragging one moves them all. ⌘A selects everything beside the selection.
- Variables in components: the + beside a text, an image, a link, a padding, a radius or a color turns it into a prop, so every use of the component can set its own.
- Drag the unit of a number field (px, %) sideways to change the value.
- Your agent stays beside the code, the CMS, the texts and the site settings, and can pick a CMS item or a text to talk about. In Code view the files are on the right, with a preview of the site beside the code.
- Translate a site that’s in one language: its texts are all there to edit and translate, and your agent finds the translations ready when it sets the languages up.
- Fixes: an element on the canvas no longer jumps to another’s place when moved, reordering inside a stack works by dragging, and a stack no longer gets a background it doesn’t have.
- The free trial asks for your email, so you hear about updates.
Build, chat, and style anything
- Builder improvements: the Insert panel has frames, stacks, grids, text, media, embeds, forms, whole sections, icons and interactive components (carousel, tabs, slideshow, ticker), each with a real preview. Drag one onto the canvas and it’s written into your code.
- Canvas expansion: press F and drag to draw a frame. Anything you draw, drop or paste on the empty canvas floats there, outside your breakpoints and never published. Move, resize and rotate it, select several with a drag, and drag it into a page when it’s ready.
- Your agent in a chat made for midcode: Claude Code, Codex, Gemini or OpenCode with your own account, with attachments, @ context (the selection, your comments, the page), the agent’s commands, its plan, and every change shown as a diff you can undo.
- Components on their own canvas: variants as columns, states (Hover, Pressed, Focus) as rows. What you change in a cell is written for that variant and state, in the component’s file.
- Typed props in the panel, read from your TypeScript types, and settings for inputs, selects, forms, buttons, embeds, audio and video.
- Styles in any project, with or without Tailwind. Where there’s no Tailwind 4 (plain CSS, CSS modules, Bootstrap, Tailwind 3) midcode writes its own utilities, mid:p-6, mid:md:flex, and turns them into plain CSS. Nothing to install, and your own classes are never touched.
- The midcode package for npm, pnpm and yarn: a CLI, a Vite plugin and a Next.js wrapper that build those styles in your own build, without the app.
- Preview: press P to use the site at full size, with the canvas always in design mode.
- Paste an image with ⌘V: it’s copied into your project and lands on the canvas, or next to the selected element.
- Drag elements between breakpoints and the canvas. Arrow keys nudge an element 1 px, and with Shift by an amount you choose in Settings.
- A simpler left panel: Agent, Layers and Assets. Layers are grouped by breakpoint, with what floats on the canvas below.
- The selection’s outline and handles turn with a rotated element, and number fields change the element as you press ↑ and ↓.
- Publish works from a project that lives in a folder of a bigger repository.
- Docs: how midcode works, step by step, at midcode.app/docs.
midcode 1.0
- Design and Code, side by side: switch to Code for the whole project as files, with tabs, an editor and a terminal. Every save is undoable and shows up in Publish.
- Your agent inside midcode: Claude Code, Codex, Gemini, Cursor or OpenCode in a panel on the left, running in your project with your own account. Send it the selected element or your open comments in one click.
- Languages: every text of your site grouped by page, in every language, with flags. Translate what’s missing with Apple Intelligence on your Mac, or hand it to your agent. Add a language in one click.
- CMS (beta): the lists in your code, JSON files and Markdown posts as tables you can edit, each change written into the file.
- Padding, radius and borders per side or corner.
- Get started: a short checklist in your first project that points at where things happen.
- Next.js 15 projects on webpack are fully editable.
- Publish pushes as the GitHub account that can, and a failed push can be retried.
- Opened from the disk image, midcode offers to move itself to Applications so it can update itself.
- Try it free for 3 days, then one payment: yours for life, every update included.
Beyond Next.js
- Open more than Next.js: Vite + React, React Router, Remix and the React islands of Astro are edited on the canvas like Next.js projects, with the same stamps and no changes to your config.
- SvelteKit, Nuxt, plain HTML and any project with a dev script open too: check every breakpoint, play the site and leave comments. A folder of HTML is served by midcode and reloads when you save.
- Send feedback from the top bar, with your Mac’s model and the log attached if you want.
- An update banner: downloading, ready to restart, and what’s new after updating.
- Comment pins show only while commenting or on the Comments tab, and C turns the pointer into a crosshair.
- Project cards in the hub get a menu: open, show in Finder, open in your code editor, copy the path, remove.
Move things around & site settings
- Drag to reorder: grab any element or section on the canvas or in Layers and drop it before, after or inside another. A blue line shows where it lands, and the code moves with it.
- Sections that are components (<Hero />, <Faq />) move where they’re used, and Layers now shows their names.
- Site settings: title, title template, description, language, site URL, favicon and social image, with a search result preview.
- Page settings for every page, and {{variables}} on dynamic pages like /work/[slug], written as Next.js metadata.
- A plain block of blocks, like a <main> of sections, is a vertical stack: align and space it from the panel.
- Resize handles only where the size is Fixed (width, height or both), and smaller.
- Custom colors open on the picker, with their value.
- No more jumps when an edit rebuilds the page’s CSS.
Build on the canvas
- Insert elements: Frame, Stack, Grid, Text, Heading, Button, Image and Video, from the toolbar or with a key (F, S, T…). They’re written straight into your code.
- Drag components from Assets onto the canvas to add an instance, imported for you.
- Open any component on its own: its code, a live preview of just that component, and the style panel to edit it. Props are editable too.
- Your own breakpoints: add, rename and resize them, and pick the primary one. Changes at other breakpoints are overrides, shown in blue, and one right-click removes them.
- A built-in code editor with a live preview of the element, so you don’t need to leave midcode for your IDE.
- A Framer-style panel: position, size (Fixed, Relative, Fill, Fit), min and max, stacks and grids, opacity, visibility per breakpoint, borders and shadows.
- Resize handles on the canvas.
- Assets tab: your components, layouts and styles in one place. Create text styles and link styles, remove the ones you don’t use.
- Pages as a tree you can reorder, with dynamic routes like /work/[slug] you can switch between.
- Optional GitHub and Vercel connections: publish over https and follow your deploy.
- The selection’s parent is outlined, and Cmd-click climbs to it.
- A floating toolbar, filled inputs, Geist everywhere and a new arrow icon.
Play, preview & media
- The interface is now available in English and Spanish.
- New Settings window (⌘,) for language and preferences.
- Play and Inspect modes: Play runs the site, with videos, animations and clickable menus. Pause to inspect and select.
- Full-size preview for each breakpoint, plus Hide UI for a clean full-screen view.
- Custom controls across the editor: selects, switches and tooltips built for midcode.
- Text styles and tags: apply your project’s type styles and switch between h1–h6, p and more from the panel.
- Copy reference: copy an element’s file:line to paste straight into your agent.
- Replace images, videos and backgrounds right from the canvas.
- Edit alt text for images.
- Rename layers in the Layers panel.
- Name layers with Apple Intelligence. It runs on-device, offline and free.
- A new app icon.
Styles & publish
- Breakpoints now render at full page height, side by side.
- Pause animations to inspect any state of the page.
- Tailwind style panel: typography, colors from your @theme tokens, spacing and radius.
- Style edits swap Tailwind classes in place, so every change is a minimal diff.
- Publish: review what changed, then commit and push in one step.
- Groundwork for automatic updates.
First canvas
- A project hub to open and reopen your Next.js projects.
- Live breakpoints on an infinite canvas: Desktop, Tablet and Phone.
- Click any element to select it and see where it’s written (file:line).
- Double-click text to edit it. Changes are written straight to the source.
- Comments pinned to elements, stored in your project’s .midcode folder.