Keyboard shortcuts in Webflow

Use keyboard shortcuts in Webflow to make your workflow as efficient as possible.

Use keyboard shortcuts in Webflow to make your workflow as efficient as possible.

Webflow has many keyboard shortcuts to help you speed up your design and build workflows. The quickest way to view a list of all shortcuts in Webflow is pressing Shift + /. Alternatively, you can click the Webflow logo in the top bar above the canvas and choose Keyboard shortcuts.

Note

You can use Control in place of Command and Alt in place of Option on Windows devices.

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`

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	`Shift` + `N`

Copy/paste shortcuts

Action	Shortcut
Copy	`Command` + `C`
Cut	`Command` + `X`
Paste	`Command` + `V`
Duplicate	`Command` + `D` or `Option` + drag

Undo/redo shortcuts

Action	Shortcut
Undo	`Command` + `Z`
Redo	`Shift` + `Command` + `Z`

Device/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 panels shortcuts

Action	Shortcut
Open Add panel	`A`
Open Pages panel	`P`
Open Navigator panel	`Z`
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

Components shortcuts

Action	Shortcut
Make selected element a component	`Command` + `Shift` + `A`
Rename selected component instance	`Option` + `R` (on Mac) or `F2` (on Windows)

Right panels shortcuts

Action	Shortcut
Open Style panel	`S`
Open Element 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 the following keyboard shortcuts when the timeline is open:

Action	Key
Delete the current selected action	`Backspace` or `Delete`
Enable “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`
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 elements shortcuts

Action	Shortcut
Wrap element in H Flex	`Option` + `G`
Wrap element in V Flex	`Command` + `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). Additionally, 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) will move.

Flex and grid layout shortcuts

You can use these shortcuts with the align box to quickly align flex and grid children inside their parent elements.

Flex layout shortcuts

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 shortcuts

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) within 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, you can use slash command shortcuts to quickly add new content elements. To use slash commands, press / (forward slash) on your keyboard and choose the desired element from the Add menu or begin typing to filter the list of elements:

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 on your keyboard to move through the list of elements. Press Return to select an element and add it to your RTE or RTF.