Shortcuts

The list of keyboard shortcuts to build in Webstudio.

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

Top Bar

• Open the current page's settings: alt + click page

• Switch 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)