--- title: "Canvas controls and keyboard shortcuts" description: "Every tool, zoom, selection and editing shortcut on the canvas, and what the right-click menu and header buttons do." url: https://help.modeinspect.com/en/articles/32-canvas-controls-and-keyboard-shortcuts collection: "Canvas" updated: 2026-10-29 language: en --- # Canvas controls and keyboard shortcuts Every tool, zoom, selection and editing shortcut on the canvas, and what the right-click menu and header buttons do. The canvas has four tools and the shortcuts below. Mac keys are shown. On Windows, press `Ctrl` for `⌘` and `Alt` for `⌥`. ## Tools The toolbar sits at the top of the canvas. Hover a tool to see its key. ![The canvas toolbar with the Frame tool's tooltip, Frame (F)](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/6M3ku6FhbAmNopQxSQddTHfFB1zznWko7XDgKVSZkp703FIsBnTImiK31wVoG7UG54SH1XbaR5D.png)

Tool	Key	What it does
Select	`V`	Select, move and resize layers. The default tool.
Frame	`F`	Draw a frame. `R` does the same.
Text	`T`	Draw a text layer. With one text layer selected, `T` edits that text instead.
Portal	`P`	Draw a Portal, a live page of your app on the canvas.
	`Esc`	Go back to Select and drop the selection.

## Zoom and pan

Keys	What it does
`=` or `+`	Zoom in
`-`	Zoom out
`⇧ 0`	Zoom to 100%
`⇧ 1`	Zoom to fit everything on the page
`⇧ 2`	Zoom to the selection, or to the whole page when nothing is selected
hold `Space` + drag	Pan
hold `Z` + click	Zoom in on the point you click. Hold `⌥` as well to zoom out.
arrow keys	Pan, when nothing is selected

The zoom level shows in the bottom right corner of the canvas. ## Selection

Keys	What it does
`Enter`	Select the children of the selected frame. On a single text layer, edit the text.
`⇧ Enter`	Select the parent of the selection
`Tab` / `⇧ Tab`	Select the next or previous sibling
`⌘ A`	Select every top-level layer on the page
arrow keys	Nudge the selection by 1 px. `⇧` nudges by 10 px.
`Esc`	Drop the selection

## Editing

Keys	What it does
`⌘ Z` / `⇧ ⌘ Z`	Undo and redo
`⌘ C`, `⌘ X`, `⌘ V`	Copy, cut, and paste
`⌘ D`	Duplicate
`Delete` or `⌫`	Delete
`⌘ G`	Frame selection: wrap the selected layers in a new frame
`⇧ ⌘ G`	Ungroup: dissolve the selected frame and keep its children
`⇧ A`	Add auto layout to the selected frame
`⇧ ⌥ A`	Remove auto layout
`⌘ ⌥ C` / `⌘ ⌥ V`	Copy the fill, stroke, radius, layout and opacity of one layer and paste them onto another
`⇧ ⌘ R`	Paste to replace: swap the selection for what you copied
`0` to `9`	Set the opacity of the selection: `5` is 50%, `0` is 100%. Two digits in a row set an exact value, `2` then `5` is 25%.

## The right-click menu Right-click a layer on the canvas or in the Layers panel. Items that do not apply to the selection are greyed out, so the menu keeps the same shape. ![The right-click menu on a frame, from Add to Build Chat down to Delete](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/3aGMuqbxVUc8bnPgsQmwOOic3xBi2Z7ljK7FOk7PVyte0E2VHktRt3agPmCEmuzFqrwqrFknngk.png) - **Add to Build Chat** sends the selected layers to the coding agent's chat. It is the first item and is greyed out on a Portal. - **Copy**, **Cut**, **Paste here**, **Paste to replace**, **Duplicate**, **Copy properties**, **Paste properties**. - **Bring to front**, **Bring forward**, **Send backward**, **Send to back**. - **Frame selection**, **Add auto layout** or **Remove auto layout**, **Ungroup**. - **Zoom to selection** and **Select all**, then **Delete**. Some layer types add their own items under the clipboard group. An image gets **Crop image** and **Remove image**. A Portal gets **Open portal** and **Capture page**. In the Layers panel, **Rename** comes right after **Add to Build Chat**. Right-click on empty canvas for the page's own menu: **Paste here**, **Add page**, **Select all**, and **Zoom to fit**. ## The header The **…** button next to the canvas name opens **Rename**, **Duplicate canvas**, **Sync tokens**, and **Delete canvas**. **Sync tokens** appears when the canvas holds design tokens, see [Use your design tokens on the canvas](https://help.modeinspect.com/en/articles/36-design-tokens.md). **Delete canvas** asks you to confirm and cannot be undone. On the right, **Open preview** opens the Portal's page in a browser window, and **Share** opens the sharing controls. The GitHub button between them holds the pull request controls for the canvas's codebase. On the demo canvas, which has no repository, it opens **Set Up Your Codebase** instead. Hover the top edge of the window for **Hide interface**, which hides every panel and leaves the canvas. The same button, now **Show interface**, brings them back. `⌘ \` toggles it too. ## Coming from Figma - `⌘ G` makes a frame, there are no groups. `⇧ ⌘ G` dissolves one. - Zoom in and out with `=` and `-` on their own, and go to 100% with `⇧ 0`. - There are no shape, pen or hand tools: everything on the canvas is a frame, text, an image, a component, or a Portal. ## Related - [Organize a canvas into pages](https://help.modeinspect.com/en/articles/41-pages.md) - [Work with layers](https://help.modeinspect.com/en/articles/39-layers.md) - [Start your first session](https://help.modeinspect.com/en/articles/9-your-first-session.md) ## Related - [Create a canvas](https://help.modeinspect.com/en/articles/35-create-a-canvas.md) - [Rename, duplicate and delete canvases](https://help.modeinspect.com/en/articles/40-rename-duplicate-and-delete-canvases.md) - [Duplicate a canvas](https://help.modeinspect.com/en/articles/37-duplicate-a-canvas.md) - [Start a canvas from a branch or pull request](https://help.modeinspect.com/en/articles/38-start-a-canvas-from-a-branch-or-pull-request.md) - [Organize a canvas into pages](https://help.modeinspect.com/en/articles/41-organize-a-canvas-into-pages.md)