Webflow keyboard shortcuts
Webflow is a visual website builder for designers who want control over HTML and CSS without writing it. Its Designer keys open panels, select and edit elements, switch breakpoints, move around the canvas, and work the interactions timeline.
Windows, macOS · 67 shortcutsGeneral and view
Open Webflow's shortcut cheatsheet, save snapshots, publish or export code, change canvas modes, and show comments.
| Action | Shortcuts |
|---|---|
| Show the shortcut cheatsheet | Windows / macOSShift + / |
| Save a snapshot | WindowsShift + Ctrl + S macOSShift + Cmd + S |
| Deselect the current element or exit | Windows / macOSEsc |
| Delete the selected elementDelete is also documented. | Windows / macOSBackspace |
| Open the publish dialog | WindowsShift + Ctrl + P macOSShift + Cmd + P |
| Open the code export dialog | WindowsShift + Ctrl + E macOSShift + Cmd + E |
| Edit the selected element | Windows / macOSEnter |
| Open Quick FindCmd+K is an additional documented binding. | WindowsCtrl + E macOSCmd + E |
| Open the AI Assistant | WindowsAlt + A macOSOption + A |
| Toggle preview mode | WindowsShift + Ctrl + P macOSShift + Cmd + P |
| Toggle the guide overlay | WindowsShift + Ctrl + G macOSShift + Cmd + G |
| Show element edges | WindowsShift + Ctrl + E macOSShift + Cmd + E |
| Toggle X-ray mode | WindowsShift + Ctrl + X macOSShift + Cmd + X |
| Toggle comment mode | Windows / macOSC |
| Show or hide on-canvas comments | Windows / macOSShift + C |
Editing and breakpoints
Copy, cut, paste, duplicate, undo, redo, and switch between Webflow's desktop, tablet, and mobile breakpoints.
| Action | Shortcuts |
|---|---|
| Copy | WindowsCtrl + C macOSCmd + C |
| Cut | WindowsCtrl + X macOSCmd + X |
| Paste | WindowsCtrl + V macOSCmd + V |
| Duplicate the selected element | WindowsCtrl + D macOSCmd + D |
| Undo | WindowsCtrl + Z macOSCmd + Z |
| Redo | WindowsShift + Ctrl + Z macOSShift + Cmd + Z |
| Switch to desktop view | Windows / macOS1 |
| Switch to tablet view | Windows / macOS2 |
| Switch to mobile landscape view | Windows / macOS3 |
| Switch to mobile portrait view | Windows / macOS4 |
Panels and components
Open Webflow's left and right panels, expand panel sections, and create or rename components from the designer.
| Action | Shortcuts |
|---|---|
| Open the Add panel | Windows / macOSA |
| Open the Pages panel | Windows / macOSP |
| Open the Navigator panel | Windows / macOSZ |
| Open the Properties panel | Windows / macOSK |
| Open the Components panel | WindowsShift + Ctrl + A macOSShift + Cmd + A |
| Show the Assets panel | Windows / macOSJ |
| Open the Style panel | Windows / macOSS |
| Open Element settings | Windows / macOSD |
| Open Style selectors | Windows / macOSG |
| Open the Interactions panel | Windows / macOSH |
| Make the selected element a component | WindowsCtrl + Shift + A macOSCmd + Shift + A |
| Rename a selected component instanceF2 is the Windows binding. | WindowsAlt + R macOSOption + R |
| Add a class to the selected element | WindowsCtrl + Enter macOSCmd + Enter |
| Rename the last class | WindowsCtrl + Shift + Enter macOSCmd + Shift + Enter |
| Duplicate the last class | WindowsCtrl + Alt + Enter macOSCmd + Option + Enter |
| Remove the last class | WindowsAlt + Shift + Enter macOSOption + Shift + Enter |
Canvas and layout
Select related elements, toggle content editors, wrap elements in flex containers, and move elements through the canvas hierarchy.
| Action | Shortcuts |
|---|---|
| Select the parent element | Windows / macOSUp Arrow |
| Select the child element | Windows / macOSDown Arrow |
| Select a sibling elementRight Arrow selects the other sibling direction. | Windows / macOSLeft Arrow |
| Select the next or previous elementRight Arrow selects the opposite direction. | WindowsAlt + Left Arrow macOSOption + Left Arrow |
| Toggle content editors | WindowsCtrl + Shift + L macOSCmd + Shift + L |
| Wrap the element in horizontal flex | WindowsAlt + G macOSOption + G |
| Wrap the element in vertical flex | WindowsCtrl + G macOSCmd + G |
| Unwrap the element | WindowsCtrl + Shift + G macOSCmd + Shift + G |
| Move before the previous elementCommand+Down is an additional documented binding. | Windows / macOS[ |
| Move after the previous elementCommand+Up is an additional documented binding. | Windows / macOS] |
| Move before a sibling within its parentCmd+Left is an additional documented binding. | WindowsCtrl + [ macOSCmd + [ |
| Move after a sibling within its parentCmd+Right is an additional documented binding. | WindowsCtrl + ] macOSCmd + ] |
| Move before the parent element | WindowsCtrl + Shift + Up macOSCmd + Shift + Up |
| Move after the parent element | WindowsCtrl + Shift + Down macOSCmd + Shift + Down |
Interactions timeline
Edit a selected action in the interactions timeline, move it by milliseconds, select multiple actions, and duplicate or paste timeline work.
| Action | Shortcuts |
|---|---|
| Delete the selected actionDelete is also documented. | Windows / macOSBackspace |
| Enable the timeline hand tool | Windows / macOSH |
| Zoom the timeline in | WindowsAlt + = macOSOption + = |
| Zoom the timeline out | WindowsAlt + - macOSOption + - |
| Move an action forward by 10 milliseconds | WindowsAlt + . macOSOption + . |
| Move an action back by 10 milliseconds | WindowsAlt + , macOSOption + , |
| Jump an action forward by 100 milliseconds | Windows / macOSShift + . |
| Jump an action back by 100 milliseconds | Windows / macOSShift + , |
| Select all timeline actions | WindowsCtrl + A macOSCmd + A |
| Copy selected actions | WindowsCtrl + C macOSCmd + C |
| Paste selected actions | WindowsCtrl + V macOSCmd + V |
| Duplicate the selected action | WindowsCtrl + D macOSCmd + D |
Source
official Webflow keyboard shortcuts · Checked
Webflow Help Center keyboard shortcuts updated August 24, 2026 and checked September 1, 2026. Some entries are context-sensitive, such as timeline and canvas commands; this record excludes mouse-only gestures while retaining the keyboard part of combined actions.