Features
WebShorts provides a comprehensive set of features to enhance your React applications with powerful keyboard shortcuts.
Universal Help Dialog
Press Shift + ? from anywhere to see all available shortcuts for the current page.
Key Benefits:
- • Always accessible - Works from any page in your app
- • Context-aware - Shows only shortcuts relevant to the current page
- • User-friendly - Clear descriptions and key combinations
- • Customizable - Adjust columns, size, and styling
Page-Specific Shortcuts
Register shortcuts that only work on specific pages or components, keeping your keyboard shortcuts organized and contextual.
Use Cases:
- • Editor shortcuts - Bold, italic, save only in text editors
- • Dashboard actions - Refresh, export only on dashboard pages
- • Form shortcuts - Submit, clear only in forms
- • Navigation - Page-specific navigation shortcuts
Debug Mode
Get toast notifications showing when shortcuts are registered, executed, fail, or when no shortcut is found.
Debug Features:
- • Registration feedback - See when shortcuts are successfully registered
- • Execution tracking - Know when shortcuts are triggered
- • Error reporting - Identify when shortcuts fail to execute
- • Missing shortcut alerts - Discover when no shortcut matches a key combination
Framework Agnostic
Works seamlessly with Next.js, Create React App, Vite, Remix, and any React framework.
Supported Key Combinations
WebShorts has the ability to support a wide range of key combinations for maximum flexibility.
Example Combinations
- •
CTRL + S- Save - •
CTRL + Z- Undo - •
CTRL + Y- Redo - •
ALT + 1- Navigate
Advanced Combinations
- •
CTRL + SHIFT + A- Multi-modifier - •
META + S- Platform-aware (Cmd/Ctrl) - •
SHIFT + ?- Universal help - •
CTRL + ALT + DEL- Complex combinations
Performance & Reliability
Lightweight
Minimal bundle size with zero unnecessary dependencies.
Event Management
Proper event listener cleanup and component lifecycle integration.
Simple API
Clean, intuitive API design that's easy to use and understand.
Extensive Customization
WebShorts is designed to adapt to your application's design system and requirements.
Customization Options:
- • Dialog styling - Customize colors, fonts, layout, and animations
- • Toast notifications - Integrate with your preferred toast library
- • Key display - Customize how keyboard combinations are shown
- • Theme support - Automatic dark/light mode adaptation
- • Responsive design - Works perfectly on all screen sizes
Learn More
Ready to get started? Explore these sections to learn more about WebShorts:
Getting Started
- • - Installation and basic setup
- • - Learn about the config file
- • - App wrapper setup
Advanced Usage
- • - Page-specific shortcuts
- • - Customizing the help dialog
- • - Theming and appearance