# midcode > midcode is a macOS app that turns a website built in code into a visual editor. You open the project folder that's on your Mac, midcode runs it and shows it live at every breakpoint on a canvas, and every edit you make (text, styles, images, layout, new sections) is written into your own source files as a minimal diff. It is the mid between code and no-code. Key facts: - Platform: macOS 13 or later, Apple silicon and Intel. Current version: 1.1.2. - Price: one payment of $199 (launch price $119 for the first buyers), no subscription, every update included, on up to 3 Macs. Free trial: 3 days, no card. - Runs locally. No account is needed, and nothing is uploaded: midcode edits the files on your Mac. - Nothing is installed in the project and no config is changed. Comments and layer names live in a .midcode folder. - It never reformats or reprints a file: only the range that was edited changes, and every edit can be undone. - AI agents (Claude Code, Codex, Gemini CLI, OpenCode, Cursor) run beside the canvas with the user's own account. midcode sells no model usage. - Made by Akila Studio (https://akilastudio.com). - Download: https://midcode.app/download — Homebrew: `brew install --cask agusdellaquila/midcode/midcode` Status words: "available" is in the version people download today, "next release" is built and ships with the next version, "in development" is being built. ## Pages - [Home](https://midcode.app/): what midcode does, features, price - [Integrations](https://midcode.app/integrations): everything midcode works with - [Docs](https://midcode.app/docs): how each part of midcode works, and how it runs and edits each framework - [Changelog](https://midcode.app/changelog): what each release added - [Everything in one file](https://midcode.app/llms-full.txt) - [The midcode skill](https://midcode.app/docs/agents/skill): the docs as a skill for coding agents (`npx skills add https://midcode.app`) ## Frameworks - [Next.js](https://midcode.app/integrations/nextjs) (available): Edit a Next.js site visually on your Mac. midcode opens your App Router project on a live canvas and writes every change into your .tsx files as a minimal diff. - [React + Vite](https://midcode.app/integrations/react) (available): Edit a React + Vite app visually. midcode runs your Vite dev server, shows every breakpoint on a canvas, and writes each change into your JSX as a minimal diff. - [React Router](https://midcode.app/integrations/react-router) (available): Edit a React Router app visually. midcode runs your dev server, lists your routes as pages, and writes every change into your route and component files. - [Remix](https://midcode.app/integrations/remix) (available): Edit a Remix app visually. midcode runs your dev server on Vite, shows every breakpoint on a canvas, and writes each change into your route files. - [SvelteKit](https://midcode.app/integrations/svelte) (available): Edit a SvelteKit site visually. midcode shows your routes at every breakpoint and writes each change into your .svelte files, parsed with your own Svelte compiler. - [Astro](https://midcode.app/integrations/astro) (next release): Edit an Astro site visually. midcode shows your pages at every breakpoint and writes each change into your .astro files, leaving frontmatter and expressions alone. - [Vue](https://midcode.app/integrations/vue) (next release): Edit a Vue app visually. midcode runs your Vite dev server, shows every breakpoint on a canvas, and writes each change into the template of your .vue files. - [Nuxt](https://midcode.app/integrations/nuxt) (next release): Edit a Nuxt site visually. midcode runs your Nuxt dev server with a layer of its own and writes each change into your pages and components. - [Plain HTML](https://midcode.app/integrations/html) (next release): Edit plain HTML visually. midcode serves your folder, shows every page at every breakpoint, and writes each change into your .html files as a minimal diff. - [Laravel](https://midcode.app/integrations/laravel) (next release): Edit Laravel Blade views visually. midcode serves your app with PHP, shows every route at every breakpoint, and writes each change into your .blade.php files. ## Platforms - [Shopify](https://midcode.app/integrations/shopify) (next release): Edit a Shopify theme’s code visually. midcode shows your store’s preview at every breakpoint and writes each change into your Liquid, JSON and locale files. ## Styling - [Tailwind CSS](https://midcode.app/integrations/tailwind-css) (available): Style a Tailwind CSS project visually. midcode reads your @theme tokens and swaps utility classes in place, per breakpoint and state, as a minimal diff. - [Plain CSS & Bootstrap](https://midcode.app/integrations/plain-css) (available): Style a site with plain CSS, CSS modules, Bootstrap or Tailwind 3 visually. midcode writes prefixed utilities and compiles them to a plain CSS file in your project. ## AI agents - [Claude Code](https://midcode.app/integrations/claude-code) (available): Use Claude Code with a visual canvas. midcode gives Claude the exact file and line of what you click, shows its changes live, and lets you finish by hand. - [Codex](https://midcode.app/integrations/codex) (available): Use OpenAI Codex with a visual canvas. midcode gives Codex the file and line of what you click, shows its changes live, and lets you finish by hand. - [Gemini CLI](https://midcode.app/integrations/gemini-cli) (available): Use Gemini CLI with a visual canvas. midcode gives Gemini the file and line of what you click, shows its changes live, and lets you finish by hand. - [OpenCode](https://midcode.app/integrations/opencode) (available): Use OpenCode with a visual canvas. midcode gives it the file and line of what you click, shows its changes live, and lets you finish by hand. - [Cursor](https://midcode.app/integrations/cursor) (available): Use midcode next to Cursor: click an element to get its file and line, copy briefs Cursor can act on, and watch its changes land on a live canvas. ## Publish - [GitHub](https://midcode.app/integrations/github) (available): Commit and push visual edits to GitHub in one step. midcode lists every change as a diff, commits only the files you check, and never force pushes. - [Vercel](https://midcode.app/integrations/vercel) (available): Edit your site visually and deploy it on Vercel with one push. midcode commits your changes to the connected repository and follows the deploy. ## Backend - [Postgres](https://midcode.app/integrations/postgres) (in development): Coming to midcode: browse your Postgres tables and run SQL next to the site that uses them. The database is found from your project’s .env, read-only by default. - [SQLite](https://midcode.app/integrations/sqlite) (in development): Coming to midcode: open the SQLite file in your project as tables, and run SQL on it, next to the site that uses it. Nothing to configure. ## Docs Each page is Markdown at the address below. "(next release)" marks what the downloadable version doesn't have yet. ### Get started - [Introduction](https://midcode.app/docs.md): What midcode is, how it edits the code you already have, and where each thing is explained. - [Install and license](https://midcode.app/docs/start/install.md): Install midcode on a Mac with Homebrew or the disk image, how it updates itself, how the 3-day trial and the license key work, and what's in Settings. - [Open a project](https://midcode.app/docs/start/open-a-project.md): How midcode opens a project folder, what it detects, how it starts your dev server, where the log is, and why a project can be view-only. - [New project](https://midcode.app/docs/start/new-project.md) (next release): Start a site from midcode's hub, with the starters it offers, the exact command each one runs, what has to be on your Mac, and what you get. - [How midcode works](https://midcode.app/docs/start/how-it-works.md): The road of one click in midcode, from the canvas to the line of code it changes, through the dev server, the marks on each element, the edit and undo. - [What midcode adds to your project](https://midcode.app/docs/start/project-files.md): Every file midcode may write in your project besides your own code, from the .midcode folder to midcode.css, with their formats and what to commit. - [What works with what](https://midcode.app/docs/start/supported-stacks.md): Every framework and stack midcode opens, how much of each you can edit on the canvas, and which parts ship with the next release. ### The editor - [The canvas and breakpoints](https://midcode.app/docs/editor/canvas.md): The canvas shows your running site at every breakpoint, side by side. How to move around it, how a breakpoint becomes a Tailwind screen, and what an override writes. - [Select, move and resize](https://midcode.app/docs/editor/select-move-resize.md): Select elements on the canvas, move, copy and resize them by hand, and line them up with snapping, rulers and guides. With the code each gesture writes. - [Layers](https://midcode.app/docs/editor/layers.md): The Layers tab lists the page's elements under each breakpoint, then what floats on the canvas. Select, reorder and rename layers, and see where names are kept. - [Text, images and video](https://midcode.app/docs/editor/text-and-media.md): Edit a text where it shows and midcode changes it where it's written, even in a data file. Replace, paste and drop images and videos, and set alt text. - [Insert](https://midcode.app/docs/editor/insert.md): The Insert panel adds frames, text, media, embeds, forms, sections, components and icons to a page, written as plain code in your own files. - [The style panel](https://midcode.app/docs/editor/styles.md): Every group of the right panel, the utility classes each control writes, overrides per breakpoint, number fields, and copying styles between elements. - [Components](https://midcode.app/docs/editor/components.md): Component mode puts a component alone on the canvas with its variants and states. The exact code midcode writes for each, typed props, and element settings. - [Variables](https://midcode.app/docs/editor/variables.md): Turn a component's text, image, link or style into a prop from the canvas, so each use of the component sets its own. The code before and after. - [The free canvas](https://midcode.app/docs/editor/free-canvas.md): In Next.js App Router projects, anything you draw, drop or paste outside the breakpoints floats on the canvas. How to use it, and the page it lives in. - [Pages and navigation](https://midcode.app/docs/editor/pages.md): The page menu of the top bar, the page tree and its order, creating and removing pages, the pages of a dynamic route, and the Assets tab. - [Site settings](https://midcode.app/docs/editor/site-settings.md): Title, description, language, favicon and social image for the site and for each page. In a Next.js project they're written as metadata in your code. - [Code view](https://midcode.app/docs/editor/code.md): Edit your project's code inside midcode: one element's file beside its preview, or the whole project with tabs, a file tree, a terminal and your agent. - [Comments](https://midcode.app/docs/editor/comments.md): Pin a comment to any element on the canvas. Each one is saved in your project with the file and line of its element, so an agent can act on it without midcode. ### Styling - [Tailwind CSS](https://midcode.app/docs/styling/tailwind.md): How midcode edits a Tailwind CSS 4 project: the classes it swaps, how breakpoints, states and variants are written, and which class expressions it can change. - [Without Tailwind](https://midcode.app/docs/styling/without-tailwind.md): How midcode styles a project that has no Tailwind 4: mid: utility classes on the element, and a midcode.css file in your project with their plain CSS. - [Theme and design tokens](https://midcode.app/docs/styling/theme.md): Edit your project's colors, fonts, text styles and link styles in midcode, and see the CSS each one writes, with Tailwind 4 and without it. - [The midcode package](https://midcode.app/docs/styling/package.md): Build midcode.css without the app, in your production build, in CI or beside an agent, with the midcode CLI, its Vite plugin or its Next.js wrapper. ### Content and data - [CMS](https://midcode.app/docs/data/cms.md) (beta): How midcode finds the content lists in your code, JSON and Markdown files, shows them as tables, and writes each change back into the file. - [Languages](https://midcode.app/docs/data/languages.md): How midcode finds your site's languages, shows every text per page and per language, writes translations into your own files, and translates what's missing. - [Database](https://midcode.app/docs/data/database.md) (next release) (beta): How midcode finds your project's Postgres or SQLite database, shows its tables, lets you edit rows safely, and what it never does with your connection string. - [SQL, charts and backups](https://midcode.app/docs/data/sql.md) (next release) (beta): Run SQL against your project's database in midcode, save queries with the project, read a result as a chart, and export, import or delete a whole database. - [Changing tables](https://midcode.app/docs/data/schema.md) (next release) (beta): Create, rename and delete tables and columns from midcode, see the exact SQL before it runs, and where the change is recorded in your project, Prisma included. - [Sign-in and users](https://midcode.app/docs/data/users.md) (next release) (beta): How midcode reads your site's sign-in from its code, lists the people in your database without ever reading a password, and what it asks your agent to build. - [Environment variables](https://midcode.app/docs/data/env.md) (next release) (beta): How midcode lists the variables your site reads from its .env files, shows which are missing without ever showing a value, and the rules it follows when it writes one. ### AI agents - [Your agent in midcode](https://midcode.app/docs/agents/overview.md): Run Claude Code, Codex, Gemini CLI, OpenCode or Cursor beside the canvas, hand it what you click, and undo or publish what it changes. - [Claude Code](https://midcode.app/docs/agents/claude-code.md): How midcode runs Claude Code, which accounts work in the chat, the optional API key, and the Terminal view for a Claude plan. - [Codex](https://midcode.app/docs/agents/codex.md): How midcode runs OpenAI's Codex in the chat and in a terminal, what has to be installed and signed in first, and where its settings come from. - [Gemini CLI](https://midcode.app/docs/agents/gemini-cli.md): How midcode runs Google's Gemini CLI in the chat and in a terminal, what has to be installed and signed in first, and what to check when it won't start. - [OpenCode](https://midcode.app/docs/agents/opencode.md): How midcode runs OpenCode in the chat and in a terminal, with the providers and models you set up in it, and what to check when it won't start. - [Cursor](https://midcode.app/docs/agents/cursor.md): Use midcode beside Cursor on the same project, run Cursor's CLI agent in midcode's terminal view, and copy references and briefs Cursor can act on. - [Code that midcode can edit](https://midcode.app/docs/agents/editable-code.md): How to write markup, classes, components and content, by hand or with an agent, so every part of it stays editable on midcode's canvas. - [The midcode skill](https://midcode.app/docs/agents/skill.md): A skill that teaches Claude Code, Codex, Cursor, Gemini CLI or OpenCode how midcode works, so the code they write stays editable on the canvas. ### Publish - [Publish](https://midcode.app/docs/publish/publish.md): What the Publish panel lists, how to choose the files that go out, the exact git commands midcode runs, and what happens when a push fails. - [GitHub](https://midcode.app/docs/publish/github.md): How midcode publishes to GitHub: which account pushes when your Mac has several, how to connect one, and where its token is kept. - [Vercel](https://midcode.app/docs/publish/vercel.md): How a publish from midcode becomes a Vercel deploy through your git push, and what connecting your Vercel account adds to the Publish panel. ### Frameworks - [Next.js](https://midcode.app/docs/frameworks/nextjs.md): How midcode runs a Next.js project, how each element learns where it's written, and what you can edit, including pages, site settings and the free canvas. - [React with Vite](https://midcode.app/docs/frameworks/react-vite.md): How midcode starts a Vite project with your own config plus one plugin, what it marks in your JSX and what you can edit, with Preact, Solid and Qwik. - [React Router and Remix](https://midcode.app/docs/frameworks/react-router.md): How midcode runs React Router in framework mode and Remix on Vite, how your routes become its pages, and what you can edit in their JSX. - [TanStack Start](https://midcode.app/docs/frameworks/tanstack-start.md) (next release): A TanStack Start or TanStack Router app is edited like any Vite + React project, and midcode reads its file routes as pages. - [Svelte and SvelteKit](https://midcode.app/docs/frameworks/svelte.md): How midcode runs SvelteKit and Vite + Svelte, how it reads .svelte files with your own compiler, and which edits it writes into them. - [Vue](https://midcode.app/docs/frameworks/vue.md) (next release): How midcode runs a Vite + Vue app, marks the elements of every template, and what you can edit in a .vue file, from text and classes to the props of each component. - [Nuxt](https://midcode.app/docs/frameworks/nuxt.md) (next release): How midcode starts a Nuxt dev server with a layer of its own, which files are pages, how auto-imported components get their props, and where midcode.css goes. - [Astro](https://midcode.app/docs/frameworks/astro.md) (next release): How midcode runs astro dev with one plugin added, what it edits in an .astro file, and how components, islands, pages and styles work. - [Angular](https://midcode.app/docs/frameworks/angular.md) (next release): How midcode runs ng serve, finds each element of an Angular page in the components' templates after it loads, and edits those templates, external or inline. - [Plain HTML](https://midcode.app/docs/frameworks/html.md) (next release): How midcode serves a folder of .html files itself, marks each element as it sends the page, edits the files in place and links midcode.css from every page. - [Create React App, Vue CLI, Gatsby, Docusaurus](https://midcode.app/docs/frameworks/webpack.md) (next release): How midcode edits sites built with webpack or Rspack, which take no plugin from outside, by riding along in their own dev script. - [Laravel](https://midcode.app/docs/frameworks/laravel.md) (next release): How midcode runs a Laravel app, edits its Blade views on the canvas, and handles the React, Vue and Livewire starter kits, without changing a file to do it. - [WordPress](https://midcode.app/docs/frameworks/wordpress.md) (next release): How midcode runs a WordPress site from its root or from a theme's folder, what it can edit in a classic theme, and why a block theme is mostly out of reach. - [PHP and Twig](https://midcode.app/docs/frameworks/php.md) (next release): How midcode runs a PHP site with PHP's built-in server and edits the HTML written in its .php and .twig templates, leaving what PHP prints alone. - [Django, Flask and FastAPI](https://midcode.app/docs/frameworks/python.md) (next release): How midcode starts a Django, Flask or FastAPI site with the project's own Python, edits its templates on the canvas, and where pages and styles come from. - [Ruby on Rails](https://midcode.app/docs/frameworks/rails.md) (next release): How midcode starts a Rails app, edits the HTML written in its ERB views on the canvas, reads its routes as pages, and what helpers like link_to leave out of reach. - [Hugo, Jekyll and Eleventy](https://midcode.app/docs/frameworks/static-generators.md) (next release): How midcode runs a Hugo, Jekyll or Eleventy site, edits its layouts and the words of its Markdown content on the canvas, and where pages and styles come from. - [Sites a server renders](https://midcode.app/docs/frameworks/server-templates.md) (next release): How midcode edits a site whose HTML a server builds from templates (PHP, Django, Rails, Hugo and others) by finding each element of the page in your template files. - [Monorepos](https://midcode.app/docs/frameworks/monorepos.md) (next release): How midcode opens a site inside a workspace, finds its package manager and dependencies at the repository's top, and picks the site when you open the top. - [Any other stack](https://midcode.app/docs/frameworks/custom-server.md) (next release): The stacks midcode recognises by their files, the command it runs for each, the form it shows when it can't tell, and the .midcode/server.json format. ### Shopify - [Shopify themes](https://midcode.app/docs/shopify/themes.md) (next release): How midcode runs a Shopify theme with your own Shopify CLI, what you can edit in its Liquid and JSON, and how the theme reaches your store. - [Sections and blocks](https://midcode.app/docs/shopify/sections.md) (next release): Change a Shopify section's settings from midcode's right panel, add, hide, move and remove sections and blocks, and see what each one writes in the theme's JSON. - [Store](https://midcode.app/docs/shopify/store.md) (next release) (beta): Manage the products, orders, customers, discounts, pages, blog posts and menus of the Shopify store behind a theme, from midcode and through your own Shopify CLI. ### Reference - [Keyboard shortcuts](https://midcode.app/docs/reference/shortcuts.md): Every key and modifier in midcode, grouped by what you're doing: tools, selection, editing, moving, the canvas, text, code and the database. - [Troubleshooting](https://midcode.app/docs/reference/troubleshooting.md): What to do when a project doesn't start in midcode, an element can't be edited, a style doesn't show or a push is refused, and what's in a report. - [Privacy and security](https://midcode.app/docs/reference/privacy.md): What midcode keeps on your Mac, every place it connects to and what it sends there, where tokens and keys are stored, and how the app is protected.