Code view

Not every change is a visual one. midcode has its own code editor for the moments you want the file itself, so you don’t have to leave for another app. There are two ways into it:

• –

  Open code shows the file of one element, with the page beside it.

• –

  Code mode turns the whole window into your project as code: files, tabs, a terminal, and your agent.

Both are the same editor on the same files, and saving works the same in both: one undoable edit that shows up in Publish.

Open code: one file beside its preview

“Open code” is in several places:

• –

  the right-click menu of an element, on the canvas or in Layers;

• –

  the “Code” section of the right panel: point at a row and click the icon;

• –

  the right-click menu of a page in the page menu, and of a component or a layout in Assets.

It opens three columns in place of the canvas:

1. 1

   The file, with the cursor on the element’s line.

2. 2

   A preview: the page at the breakpoint the element was selected in, the whole page scaled to the column’s width, with the element outlined and scrolled into view. Its header says which breakpoint, and “Updates when you save”.

3. 3

   The right panel, the same one as on the canvas, so you can still style what’s selected.

Click another element in the preview and the editor goes to its code, in whatever file that is.

The header of the file has four controls: “Reload from disk”, “Open in your code editor”, “Save” (⌘S) and close (Esc). If you close with unsaved typing, midcode asks first; the typing is kept as a draft for that file until you quit midcode.

In component mode, “Open code” on something in the component’s file doesn’t leave the canvas: the file opens in a pane beside the grid, at that line. The same pane opens with the code button of the component’s bar.

Code mode

Switch from Design to Code in the middle of the top bar. The canvas stays loaded behind, so switching back is instant.

Files

The tree on the right is your project folder. Click a file to open it in a tab. Folders that aren’t your own code (node_modules, .next, .git, dist, build and the like) and dotfiles are dimmed; .env files are not.

The buttons above the tree make a new file or a new folder and read the tree again. Right-click a file or a folder for “New file”, “New folder”, “Rename”, “Copy path”, “Show in Finder” and “Move to Trash”. Files that were created or renamed outside midcode (by your agent, in the terminal) appear when midcode gets the focus back.

Tabs and the editor

A dot on a tab means unsaved changes. Closing such a tab asks first, and in Code mode closing it drops the changes. A middle click closes a tab.

The editor colors TypeScript, JavaScript and JSX, CSS and SCSS, JSON, Markdown, and HTML (which is also how .vue, .svelte and .astro files are colored). It has line numbers, folding, bracket matching, search and replace (⌘F), and indents with Tab.

The preview beside the code

The play button at the end of the tab bar (“Preview beside the code”) opens your site next to the editor.

• –

  If the open file is a page’s own file, the preview shows that page. Otherwise, and for a dynamic route, it shows the page the canvas is on.

• –

  A list in its header chooses the breakpoint, and the buttons beside it reload and close the preview.

• –

  It updates with every save.

• –

  Click an element in it and the editor opens the file where that element is written, at its line.

Terminal

Press ⌃` or click “Terminal” in the bar at the bottom. It’s a real terminal in the project’s folder: your login shell, with the same PATH as your own terminal app.

A terminal keeps running when you close its panel, switch back to Design or look at another project tab, and shows where it was when you open it again. It ends when you close the project’s tab or quit midcode.

Saving

⌘S saves the file in front. A save is:

• –

  one step in the undo history. Outside the editor, ⌘Z takes the whole save back, like any other edit. While the editor has the focus, ⌘Z and ⇧⌘Z are the editor’s own undo and redo, for your typing.

• –

  one entry in Publish, named “Code edit in page.tsx”.

• –

  refused if the file changed since you opened it. midcode never writes over someone else’s change: it says “app/page.tsx changed since you opened it. Reload it, then save again.”

The editor follows the file while it’s open. After an edit on the canvas, an undo, or an edit your agent made through the chat, the text updates by itself. Unsaved typing is never replaced.

The “Open code” editor also checks the disk every few seconds and whenever midcode gets the focus, so changes made outside midcode (the terminal, another editor) show up too. With unsaved typing it shows a “Changed on disk” mark instead, and “Reload from disk” takes the file’s version and drops your typing. A Code mode tab doesn’t watch for outside changes: if a save is refused there, close the tab and open the file again.

A new file made in the file tree is recorded too, as “New file” with its path. Renaming a file and moving one to the Trash act on the disk directly: they aren’t steps in the undo history. A file in the Trash can be put back from there.

Your own editor

“Open in your code editor” opens the same file, at the same line, in the editor you use. Which one is in Settings (⌘,) → “Code editor”: Automatic (the first one installed among Cursor, Visual Studio Code, Windsurf and Zed), one of those four, or “Default app for the file”.

Nothing stops you from keeping your editor open on the project all the time. midcode reads the files from disk and shows what’s there.

What midcode writes

Exactly what you typed. A save replaces the file’s content with the editor’s, and git diff shows your change and nothing else: midcode doesn’t format the file, sort imports or touch other lines.

Limits

• –

  Files larger than 2 MB aren’t opened, and neither are binary files.

• –

  “Open code” opens code, styles and content files: .ts, .tsx, .js, .jsx, .mjs, .cjs, .css, .scss, .json, .md, .mdx, .html, .svg, .txt and .yml. For anything else (a .svelte, .vue or .astro file, a server template) “Open code” answers “midcode can’t open this kind of file”: use Code mode, which opens any text file.

• –

  The editor doesn’t complete code, check types or show errors. For that, open the file in your own editor.

• –

  Unsaved typing in a Code mode tab is lost if you close the tab or quit midcode.

• –

  Renaming or moving a file doesn’t update the imports that point to it.