# 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.

- Page: https://midcode.app/docs/reference/shortcuts
- From the midcode docs. Every page as Markdown: https://midcode.app/llms.txt

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](https://midcode.app/docs/editor/insert.md).

| 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](https://midcode.app/docs/editor/select-move-resize.md).

## 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](https://midcode.app/docs/editor/free-canvas.md). An element in the flow moves by dragging: see [Select, move and resize](https://midcode.app/docs/editor/select-move-resize.md).

### Padding, gap and radius handles (next 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](https://midcode.app/docs/editor/code.md).

| 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](https://midcode.app/docs/agents/overview.md).

| 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. |

## Database (next 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. |