🔤 Windframe Keyboard Shortcuts Guide

Windframe supports a variety of keyboard shortcuts designed to boost your productivity and streamline the design workflow. Below is a breakdown of all available shortcuts and what they do in detail.

🧱 Element Shortcuts

These shortcuts help you manipulate components inside the canvas area (add, move, clone, delete).

⌘ + ↵ or Ctrl + ↵ (Add Element)

Action: Adds a new element to your design or layout.

Use Case: Quickly add components without dragging from the sidebar.

Tip: Often inserts a default or previously used component.

⌘ + ↑ or Ctrl + ↑ (Move Element Up)

Action: Moves the selected element one position upward in the layout or DOM tree.

Use Case: Reorders items in a vertical layout (e.g., moving a card higher in a stack).

⌘ + ↓ or Ctrl + ↓ (Move Element Down)

Action: Moves the selected element one position downward.

Use Case: Like above, but moves the element lower in the layout stack.

⌘ + D or Ctrl + D (Clone Element)

Action: Creates an exact duplicate of the currently selected element.

Use Case: Fast way to replicate cards, buttons, rows, or any UI blocks.

⌘ + Delete or Ctrl + Delete (Remove Element)

Action: Deletes the selected element from the canvas.

Use Case: Clean up unused or placeholder components.

📁 Project Shortcuts

These shortcuts help you manage your design sessions, like creating, undoing, saving, and previewing.

⌘ + K or Ctrl + K (New Project)

Action: Starts a new project or page in Windframe.

Use Case: When you want to begin a new layout from scratch.

⌘ + Z or Ctrl + Z (Undo)

Action: Reverts the last change you made.

Use Case: Useful when you accidentally move or delete a component.

⌘ + Y or Ctrl + Y (Redo)

Action: Re-applies the last undone action.

Use Case: If you undid something by mistake, this puts it back.

⌘ + S or Ctrl + S (Save Project)

Action: Saves your current progress.

Use Case: Essential for persisting changes before switching pages or previewing.

⌘ + P or Ctrl + P (Preview Project)

Action: Opens a live preview of your project.

Use Case: See your design in a near-production state to test responsiveness, layout, and interactions.

✨ Pro Tips

• All keyboard shortcuts are Mac-style (⌘) — on Windows, use Ctrl instead of Command.

• These shortcuts work contextually — if no element is selected, element-specific shortcuts will not work.

• You can combine cloning and reordering (⌘ + D then ⌘ + ↑/↓) for rapid layout prototyping.