Webflow shortcuts
- 24 shortcuts
- 5 sections
- Design
- Also on: Windows
- Verified against official docs
Your answer helps keep this page right.
Do these shortcuts work for you?
The four Breakpoints shortcuts are the number keys from one to four, without a modifier: Desktop, Tablet, Mobile Landscape and Mobile Portrait. In Elements, the Webflow shortcuts Select Parent and Select Child use the up and down arrow keys with one modifier, and Previous Sibling and Next Sibling use the left and right arrow keys alone. The Preview section has Preview Mode, Show Shortcuts and Publish Site.
Start with these
- Quick Find
- Select Parent
- Select Child
- Add/Edit Class
- Preview Mode
- Save
Tips for Webflow
- Publish Site ⇧⌘↩ and Add/Edit Class ⌘↩ use the same key. Publish Site ⇧⌘↩ has Shift as well.
- In Canvas, Hide/Show Element H is a single letter and Delete Element Delete is the Delete key.
Jump to section
Canvas7
| Action | Shortcut |
|---|---|
| Undo | |
| Redo | |
| Save | |
| Duplicate Element | |
| Delete Element | |
| Hide/Show Element | |
| Quick Find |
Elements6
| Action | Shortcut |
|---|---|
| Select Parent | |
| Select Child | |
| Previous Sibling | |
| Next Sibling | |
| Wrap with Div | |
| Add/Edit Class |
Typography4
| Action | Shortcut |
|---|---|
| Bold | |
| Italic | |
| Underline | |
| Create Link |
Breakpoints4
| Action | Shortcut |
|---|---|
| Desktop | |
| Tablet | |
| Mobile Landscape | |
| Mobile Portrait |
Preview3
| Action | Shortcut |
|---|---|
| Preview Mode | |
| Show Shortcuts | |
| Publish Site |
Report a problem
GitHub is public. Email is private.
Related resources
More Design shortcuts
Explore more macOS apps
Frequently Asked Questions
How many keyboard shortcuts does Webflow have on macOS?
Webflow has 24 keyboard shortcuts on macOS, organized into 5 sections: Canvas, Elements, Typography, Breakpoints, and more. This page lists all of them with searchable, organized shortcut tables.
Which Webflow shortcuts should I learn first?
Start with Quick Find (⌘E), Select Parent (⌘↑), Select Child (⌘↓), Add/Edit Class (⌘↩), Preview Mode (⇧⌘P), Save (⌘S). The sections on this page list the rest.
Can I download Webflow shortcuts as a PDF?
Yes. Click the download button at the top of this page to generate a printable PDF cheat sheet with all 24 Webflow shortcuts. The PDF includes organized sections, keycap-style key labels, and space for your own notes.
Where is the official Webflow keyboard shortcuts documentation?
The official Webflow keyboard shortcuts documentation is available on their website. Every shortcut on this page is sourced from and verified against the official documentation to ensure accuracy.
Do these Webflow shortcuts work on all Mac keyboards?
Yes. These shortcuts work on all Mac keyboards, including MacBook built-in keyboards and external Apple keyboards. The modifier keys are Command (⌘), Option (⌥), Control (⌃), and Shift (⇧). On keyboards without a Function row, some F-key shortcuts may require holding the Fn key.
Maintained by Vladik Didyk
Access Webflow shortcuts from your menu bar
KeyShortcut detects the active app and shows its shortcuts instantly. Switch it on in Settings. No memorization needed.