Press F for key shortcuts
A Shower Of Thoughts

ZapKeys

Published on .

ZapKeys is a JavaScript UI utility that makes it super easy and quick to add keyboard shortcuts to any page.

Try it now #

The easiest way to see it in action is by pressing the F key now, on this page!

What it does: a different approach to shortcuts #

Instead of requiring visitors/customers to learn and memorize some set of keypress combinations for your website, ZapKeys simply shows a key or key-sequence above each interative element on the page. They can then press the key/sequence and the corresponding element's interaction will be triggered.

So buttons and links will be clicked, forms fields will be focused on, etc. All without needing a pointer device or mouse.

How it works #

When it's activated by the end-user - by pressing the preconfigured activation key - ZapKeys grabs all the currently-visible interactive elements of the page (buttons, links, form-fields) and adds an overlay with a unique key/sequence over each element. Then, when one of the key-sequences is pressed, the corresponding element's interaction is triggered.

The easiest setup #

My goal was to make setting it up as easy as possible; with the default configuration and in the simplest implementation, you only need to:

  1. Include ZapKeys' CSS, and

  2. Import the JS module and initialize it:

    <!-- On your HTML -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/zapkeys@0.2.1/dist/index.css"
    />

    <script type="module">
      import { ZapKeys } from "https://unpkg.com/zapkeys@0.2.1/dist/zapkeys.esm.js";
      const zapkeys = new ZapKeys(); // default config - pressing 'F' will activate the shortcuts
      zapkeys.init();
    </script>

That's it! This is exactly the setup used in ZapKeys' homepage.

Naturally there's more configuration options to customise ZapKeys - you can check those on the npm page. It's also available for bundling via npm i zapkeys or yarn add zapkeys.

Years in the making #

I started working on this utility around five years ago!

I was inspired by Number overlays in Voice Control for macOS which was announced around that time. I thought that while it would be difficult to make it work by voice on the browser, it was nice how Voice Control added a visual indicator for each element that you could interact with. I figured the next best thing was to make it work with the keyboard instead.

While looking for existing libraries that implemented this solution I only found "traditional" shortcut libraries. But then I found Vimium which has a feature that's pretty much what I had in mind, but wasn't a library that I could use on my own sites. That's when I decided to build it myself.

At some point it was working well enough in both Satelite and on this website so I considered it finished. Later I published it in npm as "Teclas" but I never worked on announcing or actually sharing it, I think partially because I didn't like the name.

Years later I came up with the new name and thought about renaming it and publishing it. But then I didn't. And more time passed.

Only a few days ago I found a bug which prompted me to update it with the fix and get it ready for publishing, actually for real this time, fr fr.

TSDX made it very easy to get ZapKeys ready as a npm library.

And here we are! ⚡

More about: projects development