This page is a complete keyboard shortcut reference for Webflow on macOS, covering all 24 shortcuts organized into 5 sections. Whether you’re new to Webflow or looking to master advanced features, this cheat sheet has every key combination you need — from basic editing and navigation to app-specific power-user actions.
Keyboard shortcuts are the fastest way to work in Webflow. Every time you use a shortcut instead of reaching for the mouse, you save a few seconds — and those seconds compound into hours over weeks and months. Start with the shortcuts you use most (copy, paste, undo, save), then gradually add app-specific ones as they become relevant to your workflow. Bookmark this page or download the PDF cheat sheet for quick reference.
Using keyboard shortcuts in Webflow reduces context switching between keyboard and mouse, helping you maintain focus and work more efficiently. Research shows that shortcut-driven workflows can save up to 8 working days per year compared to menu-driven navigation. On macOS, most Webflow shortcuts follow standard conventions — once you learn the modifier key patterns, new shortcuts become intuitive.
Tips for Learning Shortcuts
- Practice one new Webflow shortcut each day. Muscle memory builds faster when you focus on a single combination at a time rather than trying to learn them all at once.
- Print or bookmark this page for quick reference while working in Webflow. Having shortcuts visible nearby helps bridge the gap between looking them up and recalling them from memory.
- Start with the shortcuts you use most. In Webflow, common actions like copy, paste, undo, and save are worth learning first since they apply across nearly every workflow.
Canvas7
| Action | Shortcut |
|---|---|
| Undo | ⌘Z |
| Redo | ⇧⌘Z |
| Save | ⌘S |
| Duplicate Element | ⌘D |
| Delete Element | Delete |
| Hide/Show Element | H |
| Quick Find | ⌘E |
Elements6
| Action | Shortcut |
|---|---|
| Select Parent | ⌘↑ |
| Select Child | ⌘↓ |
| Previous Sibling | ← |
| Next Sibling | → |
| Wrap with Div | ⌥⌘A |
| Add/Edit Class | ⌘↩ |
Typography4
| Action | Shortcut |
|---|---|
| Bold | ⌘B |
| Italic | ⌘I |
| Underline | ⌘U |
| Create Link | ⌘K |
Breakpoints4
| Action | Shortcut |
|---|---|
| Desktop | 1 |
| Tablet | 2 |
| Mobile Landscape | 3 |
| Mobile Portrait | 4 |
Preview3
| Action | Shortcut |
|---|---|
| Preview Mode | ⇧⌘P |
| Show Shortcuts | ⇧/ |
| Publish Site | ⇧⌘↩ |
Frequently Asked Questions
Access Webflow shortcuts from your menu bar
KeyShortcut detects the active app and shows its shortcuts instantly. No memorization needed.