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: command + z

• Redo: command + shift + z

• Deselect/abort: esc

Sidebar Left

• Copy: command + c

• Cut: command + x

• Paste: command + v

• Duplicate: command + d

• Open Navigator: z

• Open Add Components: a

• Edit Component: enter

• Rename instance label: command + e

• Expand Navigator item: right arrow

• Collapse Navigator item: left arrow

• Expand all Navigator item children: alt + click

Style Panel

• Open Style Panel: s

• Reset style: alt + click

• Reset style for all corners: shift + alt + click

• Edit spacing on all sides (via drag): shift + drag

• Edit spacing on all sides (via one input): shift + click input, add value, enter

• Edit spacing on two sides (via drag): alt + drag

• Edit spacing on two sides (via one input): alt + click input, add value, 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

• Preview: command + shift + p

• Switch breakpoints: numbers (e.g., 1 switches to the first one)