According to Brainscape, keyboard shortcuts save the average computer professional 8 full working days per year. For Webflow designers and developers spending 8 hours a day in the Designer, the math looks like this:
(2 wasted seconds per minute) x (480 min per workday) x (240 workdays / year) = 64 wasted hours / year
64 hours is roughly eight full working days - time you could spend designing, building clients, or not working at all. And that's before you consider the ergonomic case - heavy mouse use is a well-documented driver of RSI (repetitive strain injury), and keyboard shortcuts meaningfully reduce that risk.
This reference covers every Webflow keyboard shortcut available in the 2026 Designer, updated to include the move element shortcuts, Markdown shortcuts, and flex/grid layout shortcuts added in recent releases. Bookmark it, print it, or pull it up in a second tab while you work.
To see the full list inside Webflow at any time, press Shift + / in the Designer. You can also click the Webflow logo in the top bar and choose Keyboard Shortcuts from the menu.
General Shortcuts
These are the shortcuts you'll use constantly regardless of what you're building.
Quick tip: Save as snapshot (Shift + Cmd + S) is different from autosave. Use it before making structural changes you might want to roll back - snapshots are manually created restore points in your Webflow development workflow.
View Shortcuts
Toggle between design views without touching the navigation bar.
X-ray mode deserves special mention. It renders all elements as transparent outlines - invaluable for debugging layout issues, inspecting nested structures, and understanding why something isn't positioning the way you expect.
Left-Hand Toolbar Shortcuts
Fast access to every panel without clicking through the sidebar.
Note: Webflow renamed Symbols to Components in 2023. If you're following older tutorials that reference a "Symbols panel," they're referring to what's now the Components panel. You can also browse ready-made components via the Webflow App Marketplace, which integrates directly into the Designer.
Right-Hand Tabs Shortcuts
These are the same on Mac and Windows.
H for Interactions is one of the more underused shortcuts in this list. If you work with Webflow interactions regularly, this becomes essential.
Copy, Paste & Duplicate Shortcuts
The Cmd + D keyboard duplicate was added in a relatively recent Webflow update and isn't in many older shortcut guides. It duplicates the selected element in place - faster than copy/paste when you're building repeating layout blocks.
Undo & Redo
Webflow maintains a generous undo history per session. Combined with manual snapshots (Shift + Cmd + S), this gives you two layers of rollback protection on complex builds.
Device View Shortcuts
Jump between breakpoints instantly. These are the same on Mac and Windows.
Responsive optimisation goes much faster when you're toggling breakpoints with a single key rather than clicking the toolbar. Make a habit of switching to mobile (4) before calling any section done.
Style Panel Shortcuts
The class shortcuts at the bottom of this table are the ones most Webflow developers don't know about. Duplicate last class (Cmd + Option + Enter) is particularly useful when you want to create a modifier class that inherits from an existing base class - no mouse required.
Move Element Shortcuts
This was added in a recent update and is missing from most shortcut roundups. These shortcuts let you reorder elements on the canvas without dragging in the Navigator.
Important limitations: You cannot move elements outside of dynamic elements (e.g., a Collection List). If you try to move a pinned element from its parent, the entire parent element moves instead.
Navigation & Selection Shortcuts
Quick find (Cmd + K) is one of the most powerful shortcuts in the Designer. It lets you jump to any element, page, or component by name - far faster than scrolling the Navigator on a large Webflow CMS build. If you have questions about specific shortcuts or workflow patterns, the Webflow Community Forum is the best place to find answers from other designers and developers.
Markdown Shortcuts (Rich Text Elements)
These shortcuts work inside Rich Text elements and Rich Text fields - useful for content-heavy sites or when editing directly in the Webflow Designer.
Flex & Grid Layout Shortcuts
These shortcuts work with the align box in the Style panel when an element is set to Flex or Grid layout.
Flex:
Grid:
Pro Tips: Less-Known Shortcuts That Speed Up Professional Workflows
Most Webflow designers know the basics. These are the shortcuts that separate fast professionals from everyone else.
1. Use arrow keys for element navigation instead of the Navigator. Once you've clicked to select an element, Up/Down jumps to parent/child and Left/Right jumps between siblings. On complex builds, this is significantly faster than scrolling the Navigator panel.
2. Cmd + K (Quick Find) works across everything. Pages, elements, classes, components - Quick Find surfaces all of them. If you're building a site with 20+ pages and 100+ components, this is faster than any panel.
3. X-ray mode (Shift + Cmd + X) for layout debugging. When a div isn't behaving as expected, X-ray mode shows you the full box model of every element at once. Faster than inspecting elements one by one.
4. Alt + drag to clone and place. Hold Option (Mac) or Alt (Windows) while dragging any element to create a copy exactly where you drop it. Essential for building repeating sections quickly.
5. Shift + Cmd + G to unwrap an element. Added in a recent release, this shortcut removes the parent wrapper while keeping the children in place - the opposite of grouping. Useful when you've over-nested a layout.
6. Use device shortcuts (1–4) before calling anything done. Pressing 1 → 2 → 3 → 4 in sequence takes about 3 seconds and catches the majority of responsive issues before they reach staging. Pair this with our free SaaS landing page checklistto make sure you're not missing anything else before handoff.
How to Use Webflow Shortcuts Effectively
Learning all of these at once won't stick. The approach that works is layering: spend a week focusing only on the shortcuts for the tasks you do most (probably copy/paste, undo/redo, and panel switching), then add one new category per week.
Webflow University has a built-in shortcut reference accessible from within the Designer (Shift + /). Keep it open in a tab until the key shortcuts become muscle memory.
If you're just getting started with Webflow and want to understand how the Designer fits into a broader workflow, our Webflow development guides cover the full picture. For shortcut-adjacent productivity - like setting up classes and component systems that make shortcuts more powerful - our Webflow custom code and interactions resources are worth reading next. And if you're building for SaaS companies, our guide to Webflow landing page design covers the full design and conversion workflow. You can also browse free Webflow templates to get a head start on new projects, or see how we approach Webflow for SaaS at Flowout.
New shortcuts are released regularly - Webflow posts updates on the Webflow Blog and in Webflow University. If you're working with a Webflow Expert (you can find Flowout there), they'll typically know about new shortcuts before they're widely documented. Or talk to our team about taking the keyboard-heavy work off your plate entirely.
Frequently Asked Questions: Webflow Keyboard Shortcuts
How do I see all Webflow shortcuts in the Designer?
Press Shift + / anywhere in the Webflow Designer. This opens the full shortcut cheatsheet without leaving your current view. You can also access it by clicking the Webflow logo in the top bar of the Designer and selecting "Keyboard Shortcuts" from the menu that appears.
What is the shortcut to preview a Webflow site?
Shift + Cmd + P on Mac or Shift + Ctrl + P on Windows toggles Preview mode. This lets you see and interact with the live version of your page without publishing. Press the same shortcut or Esc to return to the Designer.
What is the shortcut to duplicate an element in Webflow?
There are two ways: Cmd + D (Mac) or Ctrl + D (Windows) duplicates the selected element in place with a single keystroke. Alternatively, hold Option (Mac) or Alt (Windows) while dragging any element to create a duplicate at the drop location.
How do I switch between breakpoints quickly in Webflow?
Press 1 for Desktop, 2 for Tablet, 3 for Phone landscape, and 4 for Phone portrait. These shortcuts work at any time in the Designer. Cycling through 1–2–3–4 before finalising any section is a fast way to catch responsive issues early.
What is the shortcut for Quick Find in Webflow?
Cmd + E or Cmd + K on Mac (and Ctrl + E or Ctrl + K on Windows) opens Quick Find. It searches across all pages, elements, classes, and components in your project - one of the most useful shortcuts on large builds.
Does Webflow have Markdown shortcuts?
Yes. Inside Rich Text elements and Rich Text fields, you can use Markdown syntax to format text and add block elements. For example, typing text bolds the text, ## + Space creates a Heading 2, and - + Space starts an unordered list. The full list is in the Markdown Shortcuts section above.
Can I move elements without dragging in the Webflow Navigator?
Yes. Select any element and use [ and ] to move it before or after its sibling elements. Use Cmd + Shift + Up/Down(Mac) or Ctrl + Shift + Up/Down (Windows) to move it before or after its parent element. These shortcuts were added in a recent Webflow update.
