Show Keystrokes in a Web Demo

Build a keyboard-navigable demo page with an on-screen keystroke overlay.

Introduction

30 Second Summary

A keyboard-only demo can look like the page is moving by itself. Your audience misses the key presses that explain each change.

In this project, you will build a keyboard-navigable demo page with the show-keystrokes custom element. You will style its on-page overlay before capturing a tab-only recording where every key press stays visible.

What You'll Build

You will move through a menu using only your keyboard while an on-page overlay labels every key in the finished recording.

By the end of this project, you'll have:

A keyboard-navigable menu where you can move focus with Tab or the arrow keys.
A live keystroke overlay that displays each key while your page has focus.
A tab-only screen recording that makes every keyboard action visible to your audience.
Secret Mission: An optional challenge to push your demo skills further.

Are there any prerequisites?

You need a browser plus a text editor. You also need any screen recorder that can capture a browser tab.

Before We Start

In a keyboard-only demo, the page can change without showing your audience what caused it. A tab-only recording also hides the physical keys you press.

The show-keystrokes custom element solves this problem from inside the page. In this step, you'll prepare your browser, editor, and tab-capture workflow before testing the live demo.

In this step, get ready to:

Confirm your browser can preview a local HTML file.
Confirm your recording workflow can target one browser tab.
Use the live show-keystrokes playground to reveal your key presses.

Check your local preview

A local file preview gives you a quick way to see changes without publishing anything online. Your editor saves the file while your browser renders it as a page.

Start your modern desktop browser from your operating system's app launcher.
Start your code editor from your operating system's app launcher.

✔️ Both tools open

Good. Your browser and editor are ready for the local demo workflow.

ⓧ One tool is missing

Use an official website or your organization's approved software catalog to get the missing tool.

Install a modern desktop browser if your machine does not have one.
Install a code editor if your machine does not have one.
Launch the newly installed tool from your operating system's app launcher.

Create a blank document with your editor's new-file control.
Save the document as preview-check.html on your Desktop.
Open the Desktop folder in Finder on macOS or File Explorer on Windows.
Double-click preview-check.html to preview it in your browser.

You should see a blank browser page with the local file's location in the address bar. That confirms your editor and browser can pass a local page between them.

Local page did not open?

Check that the filename ends with .html.
Use your browser when your computer asks which app should open the file.
Confirm that preview-check.html is saved on your Desktop.
Help me troubleshoot why my local HTML file does not open in my browser.

The blank file was only a readiness check. You can remove it without affecting the project.

Close the blank browser tab.
Delete preview-check.html from your Desktop.

Confirm single-tab capture

A single-tab capture keeps the recording focused on your demo page. It also confirms that the web-native overlay stays inside the content your audience sees.

A screen-recording permission prompt can feel broader than expected. Grant access only to the recording tool you chose for this project.

Start your browser-based recorder or screen-recording tool from your operating system's app launcher.
Open its capture-source chooser without starting a recording.
Approve the operating system's screen-recording request if one appears.
Confirm that the chooser offers one browser tab as a capture source.
Close the capture-source chooser without recording.

✔️ I can select one browser tab

Your capture workflow is ready. The final recording can stay inside the browser tab that contains your demo.

ⓧ I cannot select one browser tab

Your current recording method does not provide the capture source this project needs.

Switch to a recording method that supports browser-tab capture.
Repeat the capture-source check with the new method.
Confirm that one browser tab can be selected before continuing.

Blocked by a work-device policy?

Work devices sometimes restrict screen-recording permissions. Use an approved browser-based recording option when native recording software is blocked.

Help me choose a permitted way to record one browser tab.

Test the live playground

The live playground gives the component focus inside a capture stage. This lets navigation keys appear as keycaps without moving the page.

Open the live show-keystrokes demo in your browser.

You should see the official demo page with an interactive playground near the top.

Scroll to the Interactive Playground section.
Select the stage labelled Click to capture keys.

Before you press a key, which keycap do you expect the playground to show first?

Press the Right Arrow key once.
Press Shift+Tab.
Press Cmd+A on macOS or Ctrl+A on Windows.

You should see a keycap or keycap combination that matches each press. The page stays in place because the focused stage captures those navigation keys.

Why doesn't ordinary typing appear?

The default playground display focuses on shortcuts and navigation keys. Regular letter typing is ignored unless the component is configured to show every keystroke.

Don't see any keycaps?

Select the Click to capture keys stage again before pressing a key.
Confirm that the demo tab is the active browser tab.
Press a navigation key instead of typing a regular letter.
Help me troubleshoot why the live playground does not display my keys.

Your browser, editor, and tab-capture workflow are ready. Next, you'll build a menu that makes keyboard navigation visible on your own page.

Explore the Live Demo

Keyboard navigation is hard to follow in a screen recording when the audience cannot see which keys you press. A page-level keystroke overlay gives those invisible actions a visual trace.

This first step lets you experience the finished behavior before you build your own version. You'll test navigation keys plus one combination in the live show-keystrokes playground.

In this step, get ready to:

Focus the live demo's interactive playground.
Test several navigation keys.
Confirm that a key combination appears visibly.

Focus the interactive playground

The demo can read keys only while its stage has keyboard focus. Its dedicated stage keeps your test keys inside the page.

Use your browser from earlier to select the live show-keystrokes demo.
Scroll to the Interactive Playground section.

You'll see a Live Keystroke Visualizer stage with the prompt Click to capture keys.

Click the stage labeled Click to capture keys.

Test navigation keys

The default playground recognizes navigation keys. These keys make a keyboard-led walkthrough easier to follow.

Press the Right Arrow key once.
Press the Left Arrow key once.
Press the Tab key once.

You'll see a keycap for each press inside the stage.

You have your first visible win: the playground now turns navigation into something an audience can follow.

Confirm a key combination

A shortcut combines a modifier key with another key. This final test checks how the playground represents that relationship.

Choose your prediction between separate keys or one visible combination.
Press Shift+Tab together.

You'll see the modifier plus the Tab key rendered together as one visible combination. This confirms that a web page can show a shortcut during a demo.

No keys appearing?

Click the playground stage again to restore keyboard focus.
Confirm the browser tab containing the demo is active.
Help me troubleshoot why the show-keystrokes playground is not displaying my key presses.

Capturing the evidence can feel fiddly because the keycaps fade soon after each press.

Press Shift+Tab again immediately before capturing your evidence.

The live overlay now gives you a clear target. Next up, you'll build a small page with a keyboard-navigable menu.

Build a Keyboard Menu

Your live demo test proved that a web page can make invisible key presses visible. Your own page now needs an interaction worth showing.

A keyboard menu gives your recording a clear path without a mouse. The finished menu lets Tab enter its items while the arrow keys move the active item.

In this step, get ready to:

Create a local demo page with a visible menu.
Make every menu item available to keyboard navigation.
Move focus between menu items with the arrow keys.

Create the menu structure

Keyboard focus tells the browser which control receives the next key press. A visible focus indicator lets viewers follow that movement.

Create the local demo page in your code editor by using the HTML page workflow you prepared earlier.
Add a visible menu made from native links or buttons.
Preview the local demo page with the browser workflow from earlier.

You should see the complete menu on the page. Each item should have a readable label.

Press Tab until one menu item receives focus.

You should see a visible focus indicator around the active menu item.

You have your first visible keyboard cue. A viewer can now follow focus as it enters the menu.

Menu items not receiving focus?

Confirm every menu item is a native link or button.
Check that no menu item has been removed from normal keyboard focus.
Help me make my menu items keyboard focusable.

Add arrow-key navigation

Tab follows the page's normal sequence of focusable controls. The menu needs its own logic for arrow-key movement.

How arrow-key navigation works

The keyboard handler reads which arrow key the viewer pressed.
The handler finds the menu item that currently holds focus.
The handler chooses the adjacent menu item.
The handler moves keyboard focus to that item.

Switch back to the local demo page in your code editor.
Add a keyboard handler to the menu that follows the sequence above.
Save the local demo page.

Before you test, where do you expect focus to move when you press an arrow key on the middle item?

Return to the previewed page in your browser.
Press Tab until a menu item receives focus.
Press an arrow key once.

You should see the focus indicator move to the adjacent menu item without a mouse click.

Press the opposite arrow key once.

You should see focus return to the previous menu item.

That keyboard loop is now working. Your menu can move focus without a mouse.

Arrow keys not moving focus?

Confirm the keyboard handler is connected to the menu.
Check that the handler finds the item that currently holds focus.
Verify that the handler moves focus to an adjacent menu item.
Help me debug my arrow-key menu navigation.

Test the keyboard-only walkthrough

The final check rehearses the same interaction you will show in a recording. Every movement should remain visible without clicking the menu.

Before you begin, do you expect every menu item to be reachable without clicking the page?

Switch back to the browser tab that previews your local demo page.
Press Tab repeatedly to move into the menu.
Press the arrow keys one at a time to move between menu items.
Press Tab again to continue through the menu.

You should see each menu item receive a visible focus indicator. You should also see the indicator move after every arrow-key press.

✔️ Awesome, I've got everything!

Your local demo page matches the keyboard navigation checkpoint.

ⓧ I'd like to double check the full code

Created as a local web page with a visible menu whose items are keyboard accessible. Tab moves focus into and through the menu, and arrow keys move focus between menu items.

You now have a keyboard-only interaction that viewers can follow on screen.

Next up, you'll add the show-keystrokes element so every key press appears directly over your page.

Add the Keystroke Overlay

Your menu already responds to Tab plus arrow-key navigation. A viewer still cannot see those physical key presses.

The show-keystrokes component solves that gap inside the page. You will load its source before adding the custom element that renders each key you use.

In this step, get ready to:

Load the show-keystrokes component source in your local HTML demo page.
Add the custom element that renders every key press.
Verify the overlay while navigating the menu.

Connect the component to your page

A custom element needs its JavaScript definition before the browser can create it. The module source registers show-keystrokes for use in your page.

Switch back to the local HTML demo page in your code editor.
Add the module source inside the document head by copying the first section below:
Add the custom element near the end of the document body by copying the second section below:

<!-- Inside the document head: load the component definition -->
<script type="module" src="https://cdn.jsdelivr.net/npm/show-keystrokes/index.js"></script>

<!-- Near the end of the document body: render every key press -->
<show-keystrokes keystrokes="all"></show-keystrokes>

What does this code do?

The type="module" attribute tells the browser to load the source as a module.
The source URL retrieves the show-keystrokes package.
The loaded module registers the show-keystrokes element with the browser.
The <show-keystrokes> element places the visualizer on your page.
The keystrokes="all" attribute makes regular typing visible.
Shortcuts plus navigation keys remain visible too.

Save your local HTML demo page.
Switch back to the browser preview from earlier.
Refresh the preview.
Select a blank part of the page once to restore page focus.
Press Tab once.

You should see the overlay render a keycap for Tab. That first keycap confirms the component is receiving keyboard input from your page.

Don't see the overlay?

Confirm that the module source sits inside the document head.
Check that the source URL matches the code block exactly.
Confirm that your internet connection can retrieve the component source.
Select the page before pressing another key.
Check that keystrokes="all" uses straight quotation marks.
Help me find why my keystroke overlay is not appearing.

✔️ Awesome, I've got everything!

Great. Your overlay integration is in place.

ⓧ I'd like to double check the full code

Compare the overlay additions below with their matching document sections.
Keep the keyboard-accessible menu from earlier in place.

<!-- Inside the document head: load the component definition -->
<script type="module" src="https://cdn.jsdelivr.net/npm/show-keystrokes/index.js"></script>

<!-- Near the end of the document body: render every key press -->
<show-keystrokes keystrokes="all"></show-keystrokes>

Test the overlay with menu navigation

The component listens while the page has focus. Menu navigation lets you check both visible results from one key press.

Before you test it, do you expect the overlay to follow every key that moves focus through the menu?

Press Tab until one menu item receives focus.
Press the arrow key that moves focus to the next menu item.
Press the arrow key that moves focus back to the previous menu item.

You should see focus move between menu items. The overlay should render each navigation key as you press it.

You have now turned an invisible keyboard walkthrough into something a viewer can follow on screen.

Menu moves but keys stay hidden?

Select the page again to ensure the browser tab has focus.
Confirm that the <show-keystrokes> element remains inside the document body.
Refresh the preview after saving your latest changes.
Help me debug why menu navigation works but the overlay stays hidden.

Capturing the overlay while a keycap is visible can feel fiddly because the display fades after a moment.

Press an arrow key immediately before taking your screenshot.

Your demo page now reveals the keys behind its menu navigation. Next up, you'll reposition the overlay before styling it to match the page.

Style the Keystroke Overlay

Your keyboard menu now works without a mouse. The show-keystrokes element also makes each navigation key visible inside the page.

The default overlay can compete with the menu during a recording. In this step, you will move it to a deliberate position and give its keycaps a high-contrast visual style.

In this step, get ready to:

Position the keystroke overlay below the menu.
Give each keycap a dark surface with bright text.
Confirm every navigation key remains visible during a walkthrough.

Move the overlay below the menu

A fixed viewport position keeps the overlay steady while focus moves through the menu. The bottom center leaves the navigation area clear during the demo.

Switch back to the local demo page in your code editor.
Find the existing <show-keystrokes> element.
Replace that element with this positioned version:

<!-- Keep pressed keys visible below the menu during the demo -->
<show-keystrokes class="custom-neon" position="viewport bottom center"></show-keystrokes>

What does this change do?

The position attribute anchors the overlay to the bottom center of the browser viewport.
The custom-neon class gives your stylesheet a specific hook for the visual changes in the next substep.

Save the local demo page.
Return to the browser preview from earlier.
Refresh the browser preview.
Press Tab once.

You should see the Tab key appear at the bottom center of the viewport. The overlay should remain clear of the menu.

Is the overlay still in the corner?

Check that the position attribute is inside the opening <show-keystrokes> tag.
Confirm the attribute value contains the three words in the same order as the code block.
Refresh the browser after saving your local demo page.
Help me troubleshoot the position of my show-keystrokes overlay.

Restyle the keycaps

The component keeps its internal elements inside the Shadow DOM. CSS Shadow Parts expose selected pieces so your page can style them from its own stylesheet.

Switch back to the local demo page in your code editor.
Find the existing <style> block.
Paste this keycap selector at the end of that style block:

/* Give every keycap a high-contrast recording surface */
show-keystrokes.custom-neon::part(key) {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid #0284c7;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35), 0 2px 0 #0369a1;
}

What does this CSS do?

The ::part(key) selector reaches every keycap exposed by the custom element.
The dark background gives each key a clear surface.
The cyan text and border keep key labels readable in a screen recording.
The shadow separates each keycap from the page behind it.

Save the local demo page.
Return to the browser preview.
Refresh the browser preview.
Press Tab once.

You should see a dark keycap with cyan text and a cyan border at the bottom center of the page.

Do the keycaps still use their default style?

Confirm the opening custom element tag contains class="custom-neon".
Check that the selector sits inside the page's existing <style> block.
Compare the spelling of custom-neon in the HTML with the spelling in the CSS selector.
Help me fix the custom keycap styles in my show-keystrokes overlay.

Modifier keys deserve a second accent because they form keyboard shortcuts with primary keys. A distinct colour makes combinations easier to read at a glance.

Paste this modifier selector directly below the keycap selector:

/* Distinguish modifier keys during shortcuts */
show-keystrokes.custom-neon::part(modifier) {
  color: #f472b6;
  border-color: #db2777;
}

How are modifier keys different?

The ::part(modifier) selector targets modifier keycaps inside the component.
The pink text and border distinguish modifiers from navigation keys.
The earlier keycap rule still supplies the shared background and shadow.

Save the local demo page.
Return to the browser preview.
Refresh the browser preview.
Press Shift+Tab.

You should see the modifier key use the pink accent. The Tab key should keep the cyan accent.

Are all keys still cyan?

Check that the new selector ends with ::part(modifier).
Confirm the modifier selector appears after the general key selector.
Press a shortcut that includes a modifier key after refreshing the page.
Help me debug the modifier styling in my show-keystrokes overlay.

Test the finished overlay

Before you test the full walkthrough, do you expect the overlay to remain readable while focus moves across the menu?

Click the menu area to give the page focus.
Press Tab until a menu item receives focus.
Press the Down Arrow key.
Press Shift+Tab.

You should see focus move through the menu while every navigation key appears in the bottom-center overlay. The keycaps should remain legible without covering the focused menu item.

That visual polish is in place. Your keyboard actions now have a deliberate on-screen home that viewers can follow.

Your overlay is positioned and styled for a clear walkthrough. Next up, you will record the browser tab and capture every visible key press.

Record a Keyboard Walkthrough

The menu now works without a mouse. The styled show-keystrokes overlay makes each keyboard move visible on the page.

A viewer still needs to see those keys in the finished recording. You’ll capture one browser tab during a keyboard-only menu walkthrough.

In this step, get ready to:

Rehearse a short menu walkthrough with every key visible.
Record the demo tab during keyboard navigation.
Check the finished recording for readable Tab plus arrow-key labels.

Rehearse the keyboard walkthrough

A short route makes the recording easy to follow. Use the same sequence you want viewers to see in the finished video.

Switch back to the browser tab showing your local demo page.
Click an empty part of the demo page to give it focus.
Press Tab until focus reaches the first menu item.
Use the arrow keys to move focus through the menu.

That is your recording route locked in. You’ll see focus move through the menu while the overlay displays each key.

Keys Missing During Rehearsal?

Click an empty part of the demo page before repeating the walkthrough.
Confirm the styled overlay remains visible inside the browser tab.
Try the menu again using only Tab plus the arrow keys.
Help me work out why my keystroke overlay stops updating when I navigate the menu.

Record the demo tab

A tab-only capture keeps the recording centered on your page. The recorder’s source picker lets you choose the demo tab without sharing the rest of your desktop.

Focus can be easy to lose when you move through recording controls. The demo page must have focus before the overlay can display your navigation keys.

Return to the recording controls you prepared earlier.
Choose the option that captures one browser tab.
Select the browser tab showing your local demo page.
Start the recording.
Return focus to the demo page before beginning the walkthrough.
Press Tab until focus reaches the first menu item.
Use the arrow keys to move focus through the menu.
Stop the recording after completing the walkthrough.

You should now see a completed take available for review in your recording tool.

Review the finished recording

The final review checks the experience from your viewer’s perspective. Both the menu focus and the overlay need to remain readable throughout the walkthrough.

Open the completed take in your recording tool’s preview.

Before you play the recording, do you expect every navigation key to remain readable in the overlay?

Play the recording from the beginning.
Watch the overlay when the recording reaches the Tab navigation.
Watch the menu focus when the recording reaches the arrow-key navigation.

You should see the Tab press appear in the styled overlay. You should also see each arrow-key press while focus moves between menu items.

Missing Keys in the Recording?

Replay the take to confirm whether the missing label occurs consistently.
Return focus to the demo page before starting a replacement take.
Record the keyboard walkthrough again with the overlay visible.
Help me diagnose missing key labels in my browser-tab recording.

Save the completed take using your recording tool’s download or export control.
Confirm the saved recording appears in the location chosen by your recording tool.

You did it. Your finished recording now makes every keyboard move visible to the viewer.

Secret mission

Pass a Keystroke Visibility Quality Gate

Stress-test how clearly your keystrokes appear at different navigation speeds. Then record a replacement walkthrough where viewers can match every visible key to its menu movement.

Clean Up Your Resources

No action is needed. Choose this option if you plan to reuse the page for future talks or demonstrations.

Keep the show-keystrokes element in your demo template for future recordings.
Keep the keyboard walkthrough recording as a reference for your next demonstration.
Remove the custom element from any production copy of the page.

Nice Work!

You did it! Your demo page now uses a styled show-keystrokes overlay to make every keyboard action visible.

Your tab-only recording captures each Tab press. It also shows the arrow keys moving focus through the menu.

You've learned how to:

Build a keyboard-navigable menu where Tab reaches the menu items. Arrow keys then move focus between them.
Add the show-keystrokes custom element to a local page. Its overlay displays every key during the walkthrough.
Style the keystroke overlay to fit the demo page. Record a single browser tab with every key press visible.
Complete the optional Secret Mission to extend your keyboard-demo workflow.

Ready to quiz yourself?