# Shortcuts

## Operating system notes

### Windows

* Replace `⌘` (`command`) with `control` (`Ctrl`).

### Mac

* On Mac, `alt` and `option` are the same key (`⌥`).

## **General**

* Undo: `⌘ + z`
* Redo: `⌘ + shift + z`
* Deselect/abort: `esc`
* Open Commands & search: `⌘ + k`
  * See [Commands & search](https://docs.webstudio.is/university/foundations/commands-and-search) to perform the following actions:
    * Unwrap
    * Wrap In Box
    * Wrap In Link

## **Sidebar Left**

* Copy: `⌘ + c`
* Cut: `⌘ + x`
* Paste: `⌘ + v`
* Duplicate: `⌘ + d`
* Open Navigator: `z`
* Open Add Components: `a`
* Edit Component: `enter`
* Rename instance label: `⌘ + e`
* Expand Navigator item: `right arrow`
* Collapse Navigator item: `left arrow`
* Expand all Navigator item children: `alt + click`

## **Style Panel**

* Open Style Panel: `s`
* Focus Style Sources: `⌘ + enter`
* Reset style: `alt + click`
* Reset style for all sides: `shift + alt + click`
* Edit spacing on all sides (via drag): `shift + drag`
* Edit spacing on all sides (via one input): add value then `shift + enter`
* Edit spacing on two sides (via drag): `alt + drag`
* Edit spacing on two sides (via one input): add value then `alt + enter`
* Increment value by 10: `shift + up/down arrow`
* Increment value by .1: `alt + up/down arrow`
* View the computed CSS variable value in the tooltip: `hold alt`

## **Settings Panel**

* Open Settings Panel: `d`

## **Help**

* Open Shortcuts Help Dialog: `⌘ + /` – View all available keyboard shortcuts in a searchable dialog

## **Top Bar**

* Open the current page's settings: `alt + click page`
* Switch [modes](https://docs.webstudio.is/university/foundations/modes)
  * Design: `⌘ + shift + d`
  * Content: `⌘ + shift + c`
  * Preview: `⌘ + shift + p`
* Switch between current mode and Preview: `⌘ + shift + c|d`
  * For example, if you are in Design mode, you can press `⌘ + shift + d` and it’ll toggle Preview. You can use the same shortcut to exit Preview.
* Switch breakpoints: `numbers` (e.g., `1` switches to the first one)

## Related

* [Commands & search](https://docs.webstudio.is/university/foundations/commands-and-search) – Navigate and perform actions with the command palette
* [Anatomy of the Webstudio builder](https://docs.webstudio.is/university/foundations/anatomy-of-the-webstudio-builder) – Overview of the Builder interface
* [Modes](https://docs.webstudio.is/university/foundations/modes) – Switch between Design, Content, and Preview modes
* [Design tokens](https://docs.webstudio.is/university/foundations/design-tokens) – Create and manage reusable styles