Find the shortcuts that speed up designing and building in Webflow, from panels to canvas moves.
Webflow has many keyboard shortcuts to help you speed up your design and build workflows. To see the full list, press Shift + /. You can also click the Webflow logo in the top bar above the canvas and choose Keyboard shortcuts.
Note
On Windows devices, use Control in place of Command and Alt in place of Option.
General shortcuts
| Action |
Shortcut |
| Show shortcut cheatsheet |
Shift + /
|
| Save as snapshot |
Shift + Command + S
|
| Deselect current selected element/exit |
Esc |
| Delete current selected element |
Backspace or Delete
|
| Show publish dialog |
Shift + P
|
| Show code export dialog |
Shift + E
|
| Edit element |
Enter |
| Open Quick find |
Command + E or Command + K
|
| Open the AI Assistant |
Option + A
|
View shortcuts
| Action |
Shortcut |
| Toggle preview mode |
Shift + Command + P
|
| Toggle guide overlay |
Shift + Command + G
|
| Show element edges |
Shift + Command + E
|
| Toggle X-ray mode |
Shift + Command + X
|
| Toggle comment mode |
C |
| Show/hide comments on-canvas |
Shift + C
|
Copy and paste shortcuts
| Action |
Shortcut |
| Copy |
Command + C
|
| Cut |
Command + X
|
| Paste |
Command + V
|
| Duplicate |
Command + D or Option + drag |
Undo and redo shortcuts
| Action |
Shortcut |
| Undo |
Command + Z
|
| Redo |
Shift + Command + Z
|
Device and breakpoint view shortcuts
| Action |
Shortcut |
| Switch to desktop view |
1 |
| Switch to tablet view |
2 |
| Switch to mobile (landscape) view |
3 |
| Switch to mobile (portrait) view |
4 |
Left panel shortcuts
| Action |
Shortcut |
| Open Add panel |
A |
| Open Pages panel |
P |
| Open Navigator panel |
Z |
| Open Properties panel (when editing main component) |
K |
| Open Components panel |
Shift + A
|
| Show Assets panel |
J |
| Expand/collapse all panel sections |
Option + click on a section |
Pages panel shortcuts
| Action |
Shortcut |
| Expand/collapse all nested page folders |
Option + Shift + click |
| Expand/collapse all pages |
Option + click any page section header |
| Expand/collapse all folders |
Option + click any folder |
Navigator panel shortcuts
| Action |
Shortcut |
| View original element or instance name in the Navigator |
Hold Option
|
| Edit a component instance or code embed from the Navigator |
Option + double-click |
Component shortcuts
| Action |
Shortcut |
| Make selected element a component |
Command + Shift + A
|
| Rename selected component instance |
Option + R (on Mac) or F2 (on Windows) |
Right panel shortcuts
| Action |
Shortcut |
| Open Style panel |
S |
| Open Settings panel |
D |
| Open Style selectors panel |
G |
| Open Interactions panel |
H |
| Expand/collapse all panel sections |
Option + click on a section |
Style panel shortcuts
| Action |
Shortcut |
| Adjust margin/padding (all sides) |
Hold Shift + drag |
| Adjust margin/padding (opposite sides — top + bottom or left + right) |
Hold Option + drag |
| Add class to current selected element |
Command + Enter
|
| Rename last class on current selected element |
Command + Shift + Enter
|
| Duplicate last class on selected element |
Command + Option + Enter
|
| Remove last class on selected element |
Option + Shift + Enter
|
Interactions timeline shortcuts
You can use these keyboard shortcuts when the timeline is open:
| Action |
Key |
| Delete the current selected action |
Backspace or Delete
|
| Enable the hand tool, which you can use to drag the timeline to scroll horizontally |
H |
| Zoom timeline in |
Option + =
|
| Zoom timeline out |
Option + -
|
| Move selected action forward by 10ms |
Option + .
|
| Move selected action back by 10ms |
Option + ,
|
| Jump selected action forward by 100ms |
Shift + .
|
| Jump selected action back by 100ms |
Shift + ,
|
| Select or deselect an action |
Shift + click |
| Select all actions in the timeline |
Command + A
|
| Copy selected actions |
Command + C
|
| Paste selected actions |
Command + V
|
| Duplicate selected action |
Command + D
|
| Zoom in/out |
Command + mouse wheel |
Canvas shortcuts
| Action |
Shortcut |
| Select parent element |
Up arrow |
| Select child element |
Down arrow |
| Select sibling element |
Left arrow / Right arrow
|
| Select next/previous element |
Option + Left arrow / Right arrow (on Mac)
Alt + Left arrow / Right arrow (on Windows) |
| Rename the selected element or component instance |
Option + R (on Mac) or F2 (on Windows) |
| Toggle content editors on selected element |
Command + Shift + L
|
Wrap element shortcuts
| Action |
Shortcut |
| Wrap element in Box |
Command + Option + G
|
| Unwrap element |
Command + Shift + G
|
Move element shortcuts
These shortcuts let you move elements on the canvas:
| Action |
Shortcut |
| Move selected element before previous element |
[ or Command + Down arrow
|
| Move selected element after previous element |
] or Command + Up arrow
|
| Move selected element before sibling element within current parent |
Command + [ or Command + Left arrow
|
| Move selected element after sibling element within current parent |
Command + ] or Command + Right arrow
|
| Move selected element before parent element |
Command + Shift + Up arrow
|
| Move selected element after parent element |
Command + Shift + Down arrow
|
Note
You can’t move elements outside of dynamic elements (e.g., a Collection list). If you try to move a pinned element from its parent element (e.g., moving a Slider mask outside of the Slider wrapper), the entire parent element (e.g., the Slider wrapper) moves.
Flex and grid layout shortcuts
Use these shortcuts with the align box to quickly align flex and grid children inside their parent elements.
Flex layout:
| Action |
Shortcut |
Set justification (i.e., justify-content) to space between |
Double-click an align box cell or Command + click an align box cell
|
Set alignment (i.e., align-items) to stretch |
Option + click an align box cell
|
Learn more about aligning flex children.
Grid layout:
| Action |
Shortcut |
Set justification (i.e., justify-items) to stretch |
Double-click an align box cell or Command + click an align box cell
|
Set alignment (i.e., align-items) to stretch |
Option + click an align box cell
|
Learn more about aligning grid children.
Rich text shortcuts
Markdown shortcuts
These Markdown shortcuts let you format text (e.g., bold, italicize, add a hyperlink) and block elements (e.g., headings, lists) in rich text elements and rich text fields using only your keyboard:
| Action |
Shortcut |
| Italicize text |
*text* or _text_
|
| Bold text |
**text** or __text__
|
| Italicize and bold text |
***text*** or ___text___
|
| Insert hyperlink |
[hyperlink text](https://www.url.com) |
| Insert Heading 1 |
# + Space
|
| Insert Heading 2 |
## + Space
|
| Insert Heading 3 |
### + Space
|
| Insert Heading 4 |
#### + Space
|
| Insert Heading 5 |
##### + Space
|
| Insert Heading 6 |
###### + Space
|
| Insert blockquote |
> + Space
|
| Insert unordered (i.e., bulleted) list |
- + Space
|
| Insert ordered (i.e., numbered) list |
1. + Space
|
Slash command shortcuts
When you’re editing content inside a rich text element or rich text field, use slash commands to quickly add new content elements. Press / (forward slash) and choose an element from the Add menu, or start typing to filter the list:
- Heading (H1–H6)
- Numbered list
- Bulleted list
- Paragraph
- Blockquote
- Image
- Video
- Rich content
- HTML embed
- Code block
You can also use the Up and Down arrows to move through the list. Press Return to add the element to your rich text element or field.