@TanStack/hotkeys
A type-safe keyboard shortcuts library for the web with cross-platform Mod key support and developer tools.
What is @TanStack/hotkeys?
TanStack Hotkeys is a type-safe keyboard shortcuts library for web applications. It solves the problem of managing complex keyboard interactions by providing a declarative, cross-platform API with built-in developer tools. The library ensures shortcuts work consistently across different operating systems and integrates seamlessly with popular frontend frameworks.
Frontend developers building interactive web applications that require keyboard navigation, shortcuts, or accessibility features, especially those using React, Vue, Svelte, Solid, or other modern frameworks.
Developers choose TanStack Hotkeys for its type-safe API, cross-platform Mod key support, and comprehensive developer tools, which reduce bugs and improve the user experience. Its framework-agnostic core with dedicated adapters makes it versatile and easy to integrate into any project.
Overview
Type-Safe keyboard shortcuts library with awesome devtools
Use Cases
Best For
- Adding keyboard shortcuts to web applications for power users
- Building accessible applications with keyboard navigation support
- Creating developer tools or IDEs that require complex keyboard interactions
- Implementing Vim-style key sequences in web-based editors
- Developing cross-platform applications where shortcuts need to adapt to macOS/Windows
- Building cheat sheet UIs or onboarding flows for keyboard shortcuts
Not Ideal For
- Production applications requiring long-term stability and no breaking changes
- Projects with only a few static shortcuts that can be handled with native event listeners
- Teams prioritizing minimal bundle size over comprehensive feature sets
- Developers using frameworks not yet supported by the available adapters (e.g., niche or emerging frameworks)
Pros & Cons
Pros
Uses template strings like `Mod+Shift+S` or parsed objects for bindings, providing compile-time error checking and reducing bugs, as highlighted in the README's emphasis on type safety.
Automatically maps to Cmd on macOS and Ctrl on Windows/Linux, simplifying cross-platform development without manual OS detection, a key feature mentioned in the README.
Includes validation, Vim-style sequences, key-state tracking, recorder UI helpers, and built-in devtools, covering advanced shortcut needs out of the box, as noted in the 'batteries included' section.
Offers core library with dedicated adapters for React, Vue, Svelte, Solid, Angular, Lit, and Preact, making it versatile across different tech stacks, as listed in the README's adapter names.
Cons
The library is explicitly marked as alpha in the README, meaning it may have frequent breaking changes, incomplete features, and limited documentation, posing risks for production use.
With advanced features like sequences and devtools, it introduces unnecessary complexity and learning curve for applications requiring only basic keyboard event handling.
While efficient, the comprehensive nature and multiple framework adapters could increase bundle size compared to minimalist alternatives, a consideration for performance-critical projects.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.