HXavS.dev

Webflow

A visual cheat-sheet for the 41 keyboard shortcuts found in Webflow

#Keyboard Shortcuts

#General

Shortcut Action
Shift / Show shortcut cheatsheet
Ctrl Shift S Save as a snapshot
Esc Deselect or abort
Del Delete element
Shift P Show publish dialog
Shift E Show export code dialog
Enter Edit element

#View

Shortcut Action
Ctrl Shift P Preview mode
Ctrl Shift G Guide overlay
Ctrl Shift E Show element edges
Ctrl Shift X X-ray mode

#Left-hand Toolbar

Shortcut Action
A Show add panel
Z Show navigator tab
P Show pages panel
Shift A Show symbols panel
Ctrl Shift A Make selected element a symbol
J Show asset manager

#Right-hand Tabs

Shortcut Action
S Show style tab
D Show settings tab
G Show style manager tab
H Show interactions tab

#Copy/Paste

Shortcut Action
Ctrl C Copy
Ctrl X Cut
Ctrl V Paste
Alt (drag) Duplicate

#Undo/Redo

Shortcut Action
Ctrl Z Undo
Ctrl Shift Z Redo

#Device View

Shortcut Action
1 Desktop
2 Tablet
3 Phone (landscape)
4 Phone (portrait)

#Style Panel

Shortcut Action
Shift (drag) Margin or padding (on all sides)
Alt (drag) Margin or padding (top and bottom, or left and right)
Ctrl Enter Add class to selected element
Ctrl Shift Enter Rename last class on selected element

#Find

Shortcut Action
Ctrl K Quick find

#Other

Shortcut Action
Alt (click) Expand or collapse panel sections
Up/Down Select parent or child element
Left/Right Select sibling element
Alt Left/Right Select next or previous element
Ctrl Shift L Toggle collaborators on selected element

#Also see