This is a bookmarklet to visualize keyboard interactions, to make it easier to demo them in gif or video format.
For a general guide on creating Bookmarklets, see FreeCodeCamp: What are Bookmarklets?
To install this bookmarklet, copy the minified code below:
JavaScript: const markup='\n<div class="kbd-overlay">\n <style>\n kbd {\n background-color: #f1f1f1;\n border: 1px solid #666;\n border-width: 1px 2px 2px 1px;\n border-radius: 5px;\n color: #333;\n padding: 2px 4px;\n margin: 1px;\n font-weight: bold;\n font-family: Arial, Helvetica, sans-serif;\n min-width: 17px;\n display: inline-block;\n text-align: center;\n }\n\n .kbd-overlay {\n padding: 16px;\n background-color: #cecece;\n border-radius: 16px;\n \n position: fixed;\n bottom: 64px;\n right: 64px;\n }\n\n .kbd-overlay .row1 {\n margin-bottom: 16px;\n display: inline-grid;\n grid-auto-flow: column;\n }\n\n .kbd-overlay .col1 {\n display: grid;\n justify-content: space-between;\n gap: 4px;\n }\n\n .kbd-overlay .col2 {\n text-align: center;\n display: grid;\n align-items: end;\n margin: 0 16px; \n }\n\n .kbd-overlay .col3 {\n display: grid;\n align-items: center;\n }\n\n .kbd-overlay .row2 {\n width: 100%;\n display: grid;\n }\n \n .highlight {\n background-color: #bbb;\n box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);\n }\n </style>\n <div class="row1">\n <div class="col1">\n <div>\n <kbd id="kbd-esc">Esc</kbd>\n </div>\n <div>\n <kbd id="kbd-tab">Tab</kbd>\n </div>\n <div>\n <kbd id="kbd-shift">Shift</tab>\n </div>\n </div>\n <div class="col2">\n <div>\n <kbd id="kbd-up">⬆️</kbd>\n </div>\n <div>\n <kbd id="kbd-left">⬅️</kbd>\n <kbd id="kbd-down">⬇️</kbd>\n <kbd id="kbd-right">➡️</kbd>\n </div>\n </div>\n <div class="col3">\n <kbd id="kbd-enter">Enter</kbd>\n </div>\n </div>\n <div class="row2">\n <kbd id="kbd-space">Space</kbd>\n </div>\n</div>\n',container=document.createElement("div");container.innerHTML=markup,document.body.appendChild(container);const qs=document.querySelector.bind(document);function highlight(n){n.classList.add("highlight")}function removeHighlight(n){n.classList.remove("highlight")}const handledKeys=[{key:"Escape",selector:"#kbd-esc"},{key:"Tab",selector:"#kbd-tab"},{key:"Shift",selector:"#kbd-shift"},{key:"Enter",selector:"#kbd-enter"},{key:" ",selector:"#kbd-space"},{key:"ArrowUp",selector:"#kbd-up"},{key:"ArrowDown",selector:"#kbd-down"},{key:"ArrowLeft",selector:"#kbd-left"},{key:"ArrowRight",selector:"#kbd-right"}];document.body.addEventListener("keydown",n=>{const d=handledKeys.find(({key:d})=>d===n.key);if(d){const n=qs(d.selector);n&&highlight(n)}}),document.body.addEventListener("keyup",n=>{const d=handledKeys.find(({key:d})=>d===n.key);if(d){const n=qs(d.selector);n&&removeHighlight(n)}});After installing, click on your Bookmarklet in the bookmarks bar and it will show the Keyboard Visaulizer overlay in the bottom right of your screen.
To edit this Bookmarklet yourself and install it from source, use the source code below.
The editted code can then be minified using https://skalman.github.io/UglifyJS-online/ and installed as described above.
// Markup setup:
const markup = `
<div class="kbd-overlay">
<style>
kbd {
background-color: #f1f1f1;
border: 1px solid #666;
border-width: 1px 2px 2px 1px;
border-radius: 5px;
color: #333;
padding: 2px 4px;
margin: 1px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
min-width: 17px;
display: inline-block;
text-align: center;
}
.kbd-overlay {
padding: 16px;
background-color: #cecece;
border-radius: 16px;
position: fixed;
bottom: 64px;
right: 64px;
}
.kbd-overlay .row1 {
margin-bottom: 16px;
display: inline-grid;
grid-auto-flow: column;
}
.kbd-overlay .col1 {
display: grid;
justify-content: space-between;
gap: 4px;
}
.kbd-overlay .col2 {
text-align: center;
display: grid;
align-items: end;
margin: 0 16px;
}
.kbd-overlay .col3 {
display: grid;
align-items: center;
}
.kbd-overlay .row2 {
width: 100%;
display: grid;
}
.highlight {
background-color: #bbb;
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
</style>
<div class="row1">
<div class="col1">
<div>
<kbd id="kbd-esc">Esc</kbd>
</div>
<div>
<kbd id="kbd-tab">Tab</kbd>
</div>
<div>
<kbd id="kbd-shift">Shift</tab>
</div>
</div>
<div class="col2">
<div>
<kbd id="kbd-up">⬆️</kbd>
</div>
<div>
<kbd id="kbd-left">⬅️</kbd>
<kbd id="kbd-down">⬇️</kbd>
<kbd id="kbd-right">➡️</kbd>
</div>
</div>
<div class="col3">
<kbd id="kbd-enter">Enter</kbd>
</div>
</div>
<div class="row2">
<kbd id="kbd-space">Space</kbd>
</div>
</div>
`;
const container = document.createElement('div');
container.innerHTML = markup;
document.body.appendChild(container);
// Actual Javascript
const qs = document.querySelector.bind(document);
function highlight(elem) {
elem.classList.add('highlight');
}
function removeHighlight(elem) {
elem.classList.remove('highlight');
}
const handledKeys = [
{ key: 'Escape', selector: '#kbd-esc'},
{ key: 'Tab', selector: '#kbd-tab' },
{ key: 'Shift', selector: '#kbd-shift' },
{ key: 'Enter', selector: '#kbd-enter' },
{ key: ' ', selector: '#kbd-space' },
{ key: 'ArrowUp', selector: '#kbd-up' },
{ key: 'ArrowDown', selector: '#kbd-down' },
{ key: 'ArrowLeft', selector: '#kbd-left' },
{ key: 'ArrowRight', selector: '#kbd-right' },
]
document.body.addEventListener('keydown', e => {
const handler = handledKeys.find(({ key }) => key === e.key);
if (handler) {
const elem = qs(handler.selector);
if (elem) {
highlight(elem);
}
}
})
document.body.addEventListener('keyup', e => {
const handler = handledKeys.find(({ key }) => key === e.key);
if (handler) {
const elem = qs(handler.selector);
if (elem) {
removeHighlight(elem);
}
}
})