Keyboard Shortcuts

Complete reference for all keyboard shortcuts in the Meno editor. Shortcuts are active when the canvas or structure tree has focus. They are disabled when you are typing in an input field, textarea, or contenteditable element.

On macOS, "Cmd" refers to the Command key. On Windows/Linux, substitute Ctrl.

General

Navigation

Move through the Structure tree without a mouse.

Tab Shortcuts

Editing

Structure

Reorder and restructure elements with bracket keys.

Breakpoints

Switch the responsive preview to different screen sizes.

Breakpoint names and pixel widths are configured in your project's project.config.json.

Command Palette Shortcuts

The Command Palette and Pages Palette have their own navigation shortcuts that are only active while the palette is open:

Command Palette (Cmd+E)

Pages Palette (Cmd+P)

These shortcuts override the normal tree navigation keys while a palette is open.

Shortcut Behavior

Modifier Keys

• Cmd (macOS) / Ctrl (Windows/Linux) -- used for system-level shortcuts like copy, paste, undo

• Shift -- combined with bracket keys for nesting operations, or with Cmd for redo

• Alt -- not used by default shortcuts

When Shortcuts Are Disabled

Shortcuts are automatically disabled when focus is in:

• Text input fields

• Textareas

• Contenteditable elements

• Modal dialogs with input fields (like the Command Palette search)

This prevents shortcuts from firing while you are typing text content, CSS values, or prop values in the Properties Panel.

Conflicts and Priority

Some keys serve dual purposes depending on context:

The Cmd modifier differentiates between the two behaviors. Without Cmd, the plain letter triggers the tab switch or editor toggle. With Cmd held, it triggers the palette or clipboard operation.

Shortcut Priority Order

When multiple shortcuts could match a key event, the system evaluates them in the order they appear in the registry. Shortcuts with modifier keys (Cmd, Shift) are checked before plain key shortcuts. This means:

1. Cmd+C always triggers Copy, never the Components tab

2. Cmd+P always opens Pages Palette, never the Pages tab

3. Cmd+E always opens Command Palette, never the Interactivity Editor

4. Shift+[ triggers nesting, not element move-up

Canvas and Sidebar

Shortcuts work in both the canvas iframe and the sidebar. The keyboard handler is attached at the document level and uses the capture phase, so it intercepts events before browser defaults like Cmd+S (save page) can fire.

Workflow Examples

Rearranging a Navigation Menu

Starting with three nav items in the wrong order:

1. Select the item that needs to move (Arrow Up/Down)

2. Press ] to move it down, or [ to move it up

3. Repeat until the order is correct

Building a Card Layout

1. Select the parent container

2. Press Cmd+E, type card, Enter to add a Card component

3. Press Cmd+E, type card, Enter to add another

4. Select the first card, press ] to reorder if needed

5. Press 1 through 5 to check responsive behavior at each breakpoint

Editing a Component Across Pages

1. Select any instance of the component

2. Press Enter to dive into the definition

3. Select the element to style, press Space to add a style

4. Press 1 through 5 to add responsive overrides

5. Press Escape to return to the page -- all instances are updated

In-Editor Shortcuts Reference

You can view shortcuts inside the editor at any time through the Shortcuts modal, accessible from the three-dot menu in the toolbar. The modal groups shortcuts by category and shows the exact key combinations.

Quick Reference Card

GENERAL                         NAVIGATION
  Cmd+Z .......... Undo          Arrow Up ...... Previous
  Cmd+Shift+Z .... Redo          Arrow Down .... Next
  Cmd+Y .......... Redo          Arrow Left .... Collapse/Parent
  Cmd+C .......... Copy          Arrow Right ... Expand/Child
  Cmd+V .......... Paste         Enter ......... Edit component
  Cmd+E .......... Commands      Escape ........ Go back
  Cmd+P .......... Pages         Shift ......... Go back
  Cmd+S .......... Preview       C ............. Components tab
                                 P ............. Pages tab

EDITING                         STRUCTURE
  Backspace ...... Delete        [ ............. Move up
  Space .......... Add style     ] ............. Move down
  E .............. Interactivity { ............. Nest previous
  X .............. XRay toggle   } ............. Nest next

BREAKPOINTS
  1 .............. Base
  2 .............. Breakpoint 2
  3 .............. Breakpoint 3
  4 .............. Breakpoint 4
  5 .............. Breakpoint 5

Next Steps

• Overview -- full editor layout and modes

• Structure Tree -- tree navigation in detail

• Properties Panel -- styling and attributes

• Command Palette -- searchable commands and components