Webflow Quick Dev Reference

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

Keyboard Shortcuts

General

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

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

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

S — Show style tab

D — Show settings tab

G — Show style manager tab

H — Show interactions tab

Copy/Paste

Ctrl C — Copy

Ctrl X — Cut

Ctrl V — Paste

Alt (drag) — Duplicate

Undo/Redo

Ctrl Z — Undo

Ctrl Shift Z — Redo

Device View

1 — Desktop

2 — Tablet

3 — Phone (landscape)

4 — Phone (portrait)

Style Panel

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

Ctrl K — Quick find

Other

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