Welcome to HotkeyPad
HotkeyPad is a lightweight package that provides a keyboard shortcuts interface for your website. Built with vanilla JavaScript and zero dependencies, it’s easy to integrate into any web project.Installation
Get started with npm, yarn, pnpm, or CDN
Quickstart
Build your first keyboard shortcut in under 5 minutes
API Reference
Explore all methods, commands, and configuration options
Examples
See HotkeyPad in action with real-world use cases
Key features
Zero dependencies
Built with vanilla JavaScript - no external dependencies required
Lightweight
Minimal footprint with maximum functionality
Keyboard navigation
Full keyboard support with arrow keys, tab, and enter
Theme aware
Automatic light and dark mode support
Customizable
Style with CSS variables and custom icons
Accessible
Built with accessibility in mind
Why HotkeyPad?
There are many libraries that provide keyboard shortcuts for web apps, but most are heavy and depend on extra dependencies. HotkeyPad was created to be simple, lightweight, and easy to integrate into any web project without adding bloat.The default activation key is Cmd+K on macOS and Ctrl+K on Windows/Linux, automatically detected based on the user’s platform.
What you’ll build
With HotkeyPad, you can create a searchable command palette that lets users:- Trigger actions with keyboard shortcuts (e.g., Ctrl+P to print)
- Search through available commands
- Navigate with keyboard (arrow keys, tab, enter)
- Group commands into sections
- Use custom icons from any icon library
Next steps
Install HotkeyPad
Choose your preferred package manager or use the CDN option.View installation guide →
Build your first shortcut
Follow the quickstart to create a working keyboard shortcut interface.Start quickstart →
Customize and extend
Explore the API reference to customize HotkeyPad for your needs.Browse API docs →