Keyboard Shortcuts

Token Editor

These shortcuts work when you're in the project editor, editing tokens and previewing components.

Undo/Redo in Detail

The undo system records every individual token change. Here's exactly what gets tracked:

• Color change — Changing any color via picker or hex input
• Font change — Selecting a different heading, body, or mono font
• Preset change — Switching spacing scale, shadow intensity, border radius, etc.
• Scale edits — Modifying individual font sizes, line heights, letter spacing, or weights
• Slider adjustment — Moving any opacity slider or numeric input

Each change creates one undo step. So if you change primary color, then change secondary color, pressing Ctrl+Z twice reverts both changes in order.

The history holds 50 states maximum. Older states are discarded when the limit is reached. History is cleared when you:

• Load a saved configuration from the server
• Reset all tokens to defaults
• Apply a template
• Refresh the page (history is in-memory only, not persisted)

Navigation Tips

While there aren't keyboard shortcuts for all navigation actions, here are patterns to move around efficiently:

Sidebar Search

The search box in the token editor sidebar is the fastest way to switch categories. Instead of scrolling through 10 categories:

• Type col → Colors
• Type typ or font → Typography
• Type spa or pad → Spacing
• Type sha or elev → Shadows
• Type rad or corner → Layout (Border Radius)
• Type bor → Borders
• Type eff or blur → Effects
• Type mot or trans → Motion
• Type foc or ring or a11y → Focus & Accessibility
• Type z-i or layer → Z-Index

Code Lab Navigation

In Code Lab, use the sidebar categories to jump to sections in the generated code. This is much faster than scrolling manually through large files:

1. Click any category in the Code Lab sidebar
2. The editor scrolls to that section and highlights it in blue
3. Use Ctrl+F inside Monaco for text-based search within the code
4. Use Ctrl+G to jump to a specific line number

Mode Switching

The three preview modes (Components, Design, Code) are accessible via the animated segmented control in the header. Click to switch — the transition includes a smooth sliding pill animation.

Productivity Workflow

Here's an efficient workflow using keyboard shortcuts:

1. Rapid iteration — Make a token change, check the preview. Not right?Ctrl+Z to undo instantly. Try a different value. Ctrl+Z again if needed. You can rapidly try 5-10 variations in seconds.
2. A/B comparison — Make a change, note how it looks. Ctrl+Z to see the before. Ctrl+Shift+Z to see the after. Toggle back and forth to compare.
3. Safe experimentation — With 50 undo states, you can freely explore radical changes (bright colors, extreme radius, spacious layout) knowing you can undo everything.
4. Quick save points — Press Ctrl+S when you reach a configuration you like. This saves to the server. If you experiment further and want to go back beyond your undo history, reload the page to restore the last saved state.