DocsReference

Keyboard shortcuts

Every key and modifier in midcode, grouped by what you're doing: tools, selection, editing, moving, the canvas, text, code and the database.

View as Markdown

midcode’s shortcuts follow Framer and Figma where there’s a habit to follow. Single keys (V, C, F) work whenever you aren’t typing, in the editor and after a click inside a frame. They do nothing while a text field has the cursor, while you edit a text on the canvas, or while Settings is open.

Commands with ⌘ are also in the menu bar, under “File”, “Edit”, “Element” and “View”.

Tools

Key	Action
`V`	Inspect: click to select.
`C`	Comment: click an element to pin a comment. Opens the “Comments” list.
`P`	Preview the site, full size and running. `P` or `Esc` comes back.
`F`	In a Next.js App Router project: draw a frame on the canvas. Elsewhere, and while editing a component: insert a frame.
`Esc`	Let go, one thing at a time: the frame tool, a picked guide, floating elements picked together, a comment being written, the open comment, the selection, the tool, the Insert or Comments panel, the component being edited.

Insert

These add the item at the selection, or at the end of the page when nothing is selected. See Insert.

Key	Inserts
`F`	A frame, in projects where `F` doesn’t draw one
`S`	A stack
`T`	A text
`⇧G`	A grid
`⇧I`	An image (asks for a file)
`⇧V`	A video (asks for a file)

Select

Key	Action
Click	Select the element.
`⇧Click`	Add it to the selection, or take it out. On the canvas and in Layers.
`⌘Click`	Inside the selection: select its parent. Again for the next one up.
`⌘↑`	Select the parent.
`⌘A`	Add every sibling of the selection. With nothing selected: everything floating on the canvas.
Double-click	Edit a text. On a component instance: open the component.
`Esc`	Deselect.

Edit

Key	Action
`⌘Z`	Undo the last edit.
`⇧⌘Z`	Redo.
`⌘C`	Copy the element: midcode keeps it for `⌘V`, and the system clipboard gets its reference (what it is and its `file:line:col`), to paste to an agent.
`⌘X`	Cut.
`⌘V`	Paste after the selection. With an image or files on the clipboard: paste those.
`⌘D`	Duplicate.
`⌫`	Delete the selection. `Delete` does the same.
`⇧A`	Wrap the selection in a stack.
`⌘;`	Hide or show the element.
`⌥⌘C`	Copy styles.
`⌥⌘V`	Paste styles.
`⇧⌘C`	Copy only the element’s reference (“Copy Reference” in the Element menu).
`⌘R`	Rename the layer.
`⌥⌘R`	Auto rename the layer (Apple Intelligence).

With several elements selected, ⌘C, ⌘X, ⌘D, ⌫ and ⇧A apply to all of them, and ⌘C puts their code on the system clipboard. In files that aren’t JSX, see the limits in Select, move and resize.

Move, resize and rotate

Key	Action
Arrow keys	Move a positioned or floating element 1 px.
`⇧` + arrow keys	Move it by the nudge amount (10 px, or what you set in Settings).
`⌥` while dragging	An element in the flow, or a floating one: leave a copy where you release. The element stays. In files that aren’t JSX, from the next release and within the same file.
`⇧` while dragging	A positioned or floating element: move along one axis.
`⌘` or `⌃` while dragging	No snapping. Press it once the drag has started.
`⇧` on a corner handle	Keep the proportions.
`⇧` while rotating	Turn in steps of 15°.
`Esc` while dragging	Cancel the move.

“Positioned” is an element placed with left and top; “floating” is one on the free canvas. An element in the flow moves by dragging: see Select, move and resize.

Padding, gap and radius handlesNext release

Key	Action
`⌥` on a padding handle	Set the opposite side too.
`⌥⇧` on a padding handle	Set all four sides.
`⌥` on a radius handle	Round that corner only.

Canvas and view

Key	Action
Scroll	Pan.
`Space` + drag	Pan.
Pinch, or `⌘` + scroll	Zoom.
`⌘=`	Zoom in.
`⌘-`	Zoom out.
`⌘0`	Actual size.
`⌘1`	Zoom to fit. `⇧1` does the same.
`⇧2`	Fit the first frame.
`R`	Show or hide the rulers and guides. `⇧R` does the same.
`⌫`	With a guide clicked: remove it.
`Esc` in the Preview	Back to the canvas. With the interface hidden: show it.

Text and fields

Key	Action
Double-click	Edit a text in place.
`Enter`	Save the text.
`Esc`	Cancel.
`↑` `↓` in a number field	Add or take 1. The element changes when the keys rest.
`⇧↑` `⇧↓` in a number field	Add or take the nudge amount.
`⇧` while dragging a field’s unit	Scrub in steps of the nudge amount.
Arrow keys on a slider	One step. With `⇧`: ten.
`⌥` while dragging a slider	Move in single units instead of the slider’s steps.
`Enter` on a slider	Type a value.

Comments and layers

Key	Action
`C`	The comment tool.
`⌘↵`	Save the comment you’re writing.
`Esc`	Cancel it, or close the open comment.
Double-click a layer	Rename it. `Enter` keeps the name, `Esc` drops it.
Double-click a breakpoint in Layers	Bring its frame into view.

Code

In “Open code” and in the Code view. See Code view.

Key	Action
`⌘S`	Save the file. It’s one undoable edit, listed in Publish.
`⌘F`	Find in the file.
`⌘Z`	Undo in the editor: your typing, not the project’s edits.
`Tab`	Indent.
`Esc`	Close “Open code” and go back to the canvas.
⌃`	Show or hide the terminal, in the Code view.

Agent

In the prompt of the agent’s chat. See Your agent in midcode.

Key	Action
`Enter`	Send.
`⇧Enter`	A new line.
`@`	Add context: the selected element, the open comments, the page, files.
`/`	At the start of the prompt: the agent’s commands.
`↑` `↓`, then `Enter` or `Tab`	Choose in the `@` or `/` menu.
`Esc`	Close the menu, stop picking, or stop the agent while it works.

DatabaseNext release

The SQL editor:

Key	Action
`⌘↵`	Run what’s selected, or everything.
`⌘S`	Save the query.
`Tab`	Accept the completion.

A table:

Key	Action
Arrow keys	Move between cells. `⇧↑` and `⇧↓` jump a screen of rows.
`Enter`, or start typing	Edit the cell.
`Enter`	While editing: keep the value.
`Tab`, `⇧Tab`	While editing: keep it and go to the next or previous column.
`⌘↵`	In the editor for a long value: keep it.
`Esc`	While editing: drop the change. Otherwise: deselect.
`⌘C`	Copy the cell.
`⌫`	Delete the rows you picked.
`⌘S`	Save the waiting changes to the database.

The app

Key	Action
`⌘N`	From the next release: a new project (the hub, with “New project” open).
`⌘O`	Open a folder.
`⇧⌘H`	Back to the projects, without closing the tab.
`⌘,`	Settings.
`Esc`	Close what’s in front: Settings, a menu, the CMS, Languages or Site settings (back to the canvas). From the next release, Database and Store too.