Live Demo: https://keyboard-7p1.pages.dev/
A powerful desktop-only React application that helps you visualize, analyze, and optimize your keyboard shortcuts system. Built specifically for keyboard shortcut enthusiasts who want to improve their shortcuts system and maintain organized, efficient keybindings.
Whether you're optimizing Vim keybindings, designing custom keyboard layouts, or maintaining complex shortcut systems, this visualizer provides the insights needed to create a more efficient and intuitive keyboard interaction experience.
This project serves users who want to:
- Understand their current shortcut system through visual representation
- Identify optimization opportunities by seeing usage patterns and conflicts
- Maintain organized keybindings across different contexts/applications
- Share and backup shortcut configurations with ease
- Discover underutilized keys for new shortcut opportunities
- Visualize the impact of configuration changes instantly
For version control and systematic management, the keyboard layout is defined entirely in code rather than through UI configuration. This approach ensures configuration changes are tracked, reviewable, and maintain consistent formatting across team environments.
- Flame Graph Mode: Keys colored by usage frequency (more frequently used = brighter colors)
- Multi-select Highlighting: Simultaneous highlighting of multiple keybindings for pattern analysis
- Key Click Filtering: Click any key to see all keybindings containing that specific key
- Real-time Preview: Immediate visual feedback for configuration changes
- Multi-select Mode: Select multiple keybindings for batch operations
- Edit Mode: Add new keybindings by clicking on keys
- Select All/Clear: One-click operations for comprehensive analysis
- Scenario Management: Switch between different keyboard configurations
- Key Frequency Analysis: Visual indication of which keys are most heavily used
- Modifier Distribution: Track usage of Ctrl, Alt, Shift across bindings
- Conflict Detection: Identify overlapping keybindings
- Coverage Analysis: Ensure all keys are being utilized effectively
- JSON Import/Export: Share configurations across devices/teams
- Local Storage: Persistent configuration storage
- Default Loading: Automatically load your configuration on startup
- Backup & Restore: Easy configuration backup system
-
Generate Configuration from Neovim:
# Inside nvim :source tools/extract-keymaps.lua # This generates your keybinding configuration
-
Load Your Configuration:
- Import your generated JSON file via the interface
- Or start with the included default configuration and manually add keybindings
-
Explore Your Shortcuts:
- Enable Multi-select mode for comprehensive analysis
- Use Select All to analyze your entire shortcut system
- Click Clear to reset selections
- Switch scenarios to analyze different contexts
# Clone and install
git clone <repository>
cd Keyboard
npm install
# Development server
npm run dev
# Build for production
npm run build
# Run tests
npm testnpm run dev- Start development server with hot reloadnpm run build- Build optimized production bundlenpm test- Run comprehensive test suitenpm run preview- Preview production build locally
- Frontend: React 18 + TypeScript 5
- Styling: TailwindCSS with custom color systems
- State Management: React Context + useState hooks
- Build Tool: Vite (lightning fast HMR)
- Testing: Vitest + React Testing Library
- Icons: Lucide React
- Visual Analytics: Custom flame graph implementation
- Data: JSON-based configuration system