Webflow keyboard shortcuts

General and view

Open Webflow's shortcut cheatsheet, save snapshots, publish or export code, change canvas modes, and show comments.

Action	Windows	macOS
Show the shortcut cheatsheet	`Shift/`	`Shift/`
Save a snapshot	`ShiftCtrlS`	`ShiftCmdS`
Deselect the current element or exit	`Esc`	`Esc`
Delete the selected elementDelete is also documented.	`Backspace`	`Backspace`
Open the publish dialog	`ShiftCtrlP`	`ShiftCmdP`
Open the code export dialog	`ShiftCtrlE`	`ShiftCmdE`
Edit the selected element	`Enter`	`Enter`
Open Quick FindCmd+K is an additional documented binding.	`CtrlE`	`CmdE`
Open the AI Assistant	`AltA`	`OptionA`
Toggle preview mode	`ShiftCtrlP`	`ShiftCmdP`
Toggle the guide overlay	`ShiftCtrlG`	`ShiftCmdG`
Show element edges	`ShiftCtrlE`	`ShiftCmdE`
Toggle X-ray mode	`ShiftCtrlX`	`ShiftCmdX`
Toggle comment mode	`C`	`C`
Show or hide on-canvas comments	`ShiftC`	`ShiftC`

Copy, cut, paste, duplicate, undo, redo, and switch between Webflow's desktop, tablet, and mobile breakpoints.

Action	Windows	macOS
Copy	`CtrlC`	`CmdC`
Cut	`CtrlX`	`CmdX`
Paste	`CtrlV`	`CmdV`
Duplicate the selected element	`CtrlD`	`CmdD`
Undo	`CtrlZ`	`CmdZ`
Redo	`ShiftCtrlZ`	`ShiftCmdZ`
Switch to desktop view	`1`	`1`
Switch to tablet view	`2`	`2`
Switch to mobile landscape view	`3`	`3`
Switch to mobile portrait view	`4`	`4`

Open Webflow's left and right panels, expand panel sections, and create or rename components from the designer.

Action	Windows	macOS
Open the Add panel	`A`	`A`
Open the Pages panel	`P`	`P`
Open the Navigator panel	`Z`	`Z`
Open the Properties panel	`K`	`K`
Open the Components panel	`ShiftCtrlA`	`ShiftCmdA`
Show the Assets panel	`J`	`J`
Open the Style panel	`S`	`S`
Open Element settings	`D`	`D`
Open Style selectors	`G`	`G`
Open the Interactions panel	`H`	`H`
Make the selected element a component	`CtrlShiftA`	`CmdShiftA`
Rename a selected component instanceF2 is the Windows binding.	`AltR`	`OptionR`
Add a class to the selected element	`CtrlEnter`	`CmdEnter`
Rename the last class	`CtrlShiftEnter`	`CmdShiftEnter`
Duplicate the last class	`CtrlAltEnter`	`CmdOptionEnter`
Remove the last class	`AltShiftEnter`	`OptionShiftEnter`

Select related elements, toggle content editors, wrap elements in flex containers, and move elements through the canvas hierarchy.

Action	Windows	macOS
Select the parent element	`Up Arrow`	`Up Arrow`
Select the child element	`Down Arrow`	`Down Arrow`
Select a sibling elementRight Arrow selects the other sibling direction.	`Left Arrow`	`Left Arrow`
Select the next or previous elementRight Arrow selects the opposite direction.	`AltLeft Arrow`	`OptionLeft Arrow`
Toggle content editors	`CtrlShiftL`	`CmdShiftL`
Wrap the element in horizontal flex	`AltG`	`OptionG`
Wrap the element in vertical flex	`CtrlG`	`CmdG`
Unwrap the element	`CtrlShiftG`	`CmdShiftG`
Move before the previous elementCommand+Down is an additional documented binding.	`[`	`[`
Move after the previous elementCommand+Up is an additional documented binding.	`]`	`]`
Move before a sibling within its parentCmd+Left is an additional documented binding.	`Ctrl[`	`Cmd[`
Move after a sibling within its parentCmd+Right is an additional documented binding.	`Ctrl]`	`Cmd]`
Move before the parent element	`CtrlShiftUp`	`CmdShiftUp`
Move after the parent element	`CtrlShiftDown`	`CmdShiftDown`

Edit a selected action in the interactions timeline, move it by milliseconds, select multiple actions, and duplicate or paste timeline work.

Action	Windows	macOS
Delete the selected actionDelete is also documented.	`Backspace`	`Backspace`
Enable the timeline hand tool	`H`	`H`
Zoom the timeline in	`Alt=`	`Option=`
Zoom the timeline out	`Alt-`	`Option-`
Move an action forward by 10 milliseconds	`Alt.`	`Option.`
Move an action back by 10 milliseconds	`Alt,`	`Option,`
Jump an action forward by 100 milliseconds	`Shift.`	`Shift.`
Jump an action back by 100 milliseconds	`Shift,`	`Shift,`
Select all timeline actions	`CtrlA`	`CmdA`
Copy selected actions	`CtrlC`	`CmdC`
Paste selected actions	`CtrlV`	`CmdV`
Duplicate the selected action	`CtrlD`	`CmdD`