Skip to content

I get asked all the time what keyboard functionality is/should be available in mock-ups and prototypes, so I've mad an extension that overlays a keyboard on a web page.

Notifications You must be signed in to change notification settings

jrmedd/KeypressDisplay

Repository files navigation

Keypress display

I knocked this Chrome extension up in a couple of hours to help me with documenting UI functionality, principally for accessibility and keyboard navigation. I get asked all the time what keyboard functionality is/should be available in mock-ups and prototypes, so I've made an extension that overlays the main navigation keys over a web page.

Demo of the keyboard

Usage

I recommend pinning the extension in your browser toolbar (done via the jigsaw icon, followed by the pin icon, in Chrome). From here you can click the extension's icon to reveal the show/hide keyboard button. From here the displayed keys will animate when you press them on your physical keyboard.

Installation

You can get the extension on the Chrome Web Store.

If you want the latest features before they're approved by Google, or to add your own, you can just clone this repo, hit developer mode on the Chrome extensions page and "load unpacked extension".

The keyboard doesn't appear on [site]

Please report any sites that you find this doesn't work on and I'll do my best to see if I can fix it.

About

I get asked all the time what keyboard functionality is/should be available in mock-ups and prototypes, so I've mad an extension that overlays a keyboard on a web page.

Topics

Resources

Stars

Watchers

Forks