⌨️ Keyboard Navigator

How to Use the Keyboard Navigator

1. Basic Testing

• Press any key to see it displayed in real-time

• The last 20 pressed keys appear in the history below

• Special keys show their proper names (e.g., “Space”, “Enter”)

2. Modifier Keys

Visual indicators light up when these are pressed:

• Shift (⇧)

• Ctrl (Control)

• Alt (Option on Mac)

• Meta (⊞ Windows/⌘ Command)

3. Built-in Shortcuts

• Esc: Clear all key history

• Space: Toggle this help panel

• Tab/Shift+Tab: Test focus navigation

💡 Developer Tips

✔ See key codes – Each history item shows the physical key (event.code)
✔ Test combinations – Hold modifiers while pressing other keys
✔ Mobile testing – Works with on-screen keyboards

🛠️ Example Use Cases

• Debugging keyboard shortcuts in your web app

• Testing game controls during development

• Verifying modifier key combinations (Ctrl+C, Alt+Tab, etc.)

⚠️ Technical Notes

• No data leaves your browser – All processing happens locally

• Mobile limitations – Some modifier keys may not register on touch devices

• Browser differences – Key codes may vary slightly across browsers