ccampbell/mousetrap

★ 11,784JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((mousetrap))
    What It Does
      Keyboard shortcuts
      Key sequences
      Programmatic triggers
    Shortcut Types
      Single key
      Key combinations
      Multi-key sequences
    Key Features
      No dependencies
      Cross-browser support
      2 KB footprint
    Use Cases
      Command palettes
      Dashboard navigation
      Easter eggs
    Audience
      Web developers
      App builders

mindmap root((mousetrap)) What It Does Keyboard shortcuts Key sequences Programmatic triggers Shortcut Types Single key Key combinations Multi-key sequences Key Features No dependencies Cross-browser support 2 KB footprint Use Cases Command palettes Dashboard navigation Easter eggs Audience Web developers App builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add Ctrl+K or Cmd+K keyboard shortcuts to open a command palette in a web app.

USE CASE 2

Implement Gmail-style sequential key shortcuts where pressing two letters in order jumps to a specific section.

USE CASE 3

Bind the Konami code key sequence to trigger an easter egg in a web application.

USE CASE 4

Create keyboard navigation for a dashboard so power users can move between views without touching the mouse.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Apache 2.0, use freely for any purpose including commercial projects, modify and distribute as long as you keep the license notice.

In plain English

Mousetrap is a small JavaScript library that lets you add keyboard shortcuts to a web page. When someone presses a key or key combination, Mousetrap triggers whatever action you specify, whether that is opening a menu, navigating to a section, or running any custom behavior. The library weighs around 2 kilobytes when compressed, so it loads quickly without noticeably slowing down your page. It has no dependencies on other frameworks or libraries, which means it fits into any web project regardless of what tools you are already using. It has been tested in browsers going back to Internet Explorer 6 as well as modern browsers like Chrome, Firefox, and Safari. You can listen for single key presses, key combinations such as Control+K or Command+Shift+K, or sequences of keys typed one after another. Sequences follow the same pattern as Gmail keyboard shortcuts, where typing two letters in order triggers a specific action. The README even shows the Konami code, a long sequence of directional keys, bound to a callback as a demo of what is possible. You can also trigger key events from code programmatically, not just from user input. Setting it up involves adding a script tag to your page, then calling Mousetrap.bind() with the key or combination you want and a function to run when it is pressed. The library handles differences between operating systems and keyboard layouts automatically. You can bind multiple combinations to the same action at once, which is useful when Mac users press Command+K and Windows users press Control+K to do the same thing. The project is open source under the Apache 2.0 license and the full documentation is available on the author's site.

Copy-paste prompts

Prompt 1

Using Mousetrap, add Ctrl+K on Windows and Cmd+K on Mac that both open the same search modal in my web app.

Prompt 2

Show me how to bind a two-key sequence in Mousetrap, like pressing G then I, to navigate to the inbox section of my app.

Prompt 3

I want to add Mousetrap to a React app. Write the useEffect hook that registers shortcuts on mount and cleans them up on unmount.

Prompt 4

Using Mousetrap, bind the Konami code sequence to show a hidden Easter egg div on my marketing page.

Prompt 5

How do I use Mousetrap.trigger() to programmatically fire a keyboard shortcut from a button click in my app?

Open on GitHub → Explain another repo

← ccampbell on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.