Show arrows or symbols on the keys for a game or app tutorial

27 October 2026 · 6 min read

macOS has no way to put your own labels on the keys you press. Its Keyboard Viewer shows what each key types and nothing else. To show an arrow on W or a star on Q in a tutorial, you need an overlay that takes custom labels. In Typebar, one link does it: open -g "typebar://layer/show?h=s:arrow.left&j=s:arrow.down&k=s:arrow.up&l=s:arrow.right&fill=blank" puts four arrows on H, J, K and L and takes the labels off every other key.

The same idea works for any game or app where the letter on a key tells the viewer nothing about what it does.

Why relabel keys at all

Plenty of software uses keys whose letters mean nothing on their own. Many games move you with W, A, S and D. Vim moves the cursor with H, J, K and L. Design apps switch tools with single letters. A keystroke display that lights up W shows the viewer which key you pressed, but not what it means, and they have to work out the mapping from what moves on screen.

Put an up arrow on W, a left arrow on A, and so on, and the board teaches the mapping at a glance. Blank out every other key and the eye goes straight to the four that matter. For a tutorial whose whole point is “these keys do this”, that is a big part of the lesson done for you.

What macOS and your editor can do

Before reaching for an app, it is worth knowing the free options and where they stop.

Keyboard Viewer. It shows a keyboard on screen with the characters your input source types, including what changes when you hold Option or Shift. It has no way to take your own labels.
The Accessibility Keyboard’s Panel Editor. In System Settings > Accessibility > Keyboard, the Panel Editor… button lets you build custom panels for the Accessibility Keyboard: on-screen buttons that you click. That is a different job: it makes a clickable panel, rather than labeling the keys you press on your real keyboard.
Titles in your video editor. Editors such as Final Cut Pro can put titles and graphics, arrows included, over the video. This always works, but you place and time every label by hand, take after take, and it has to be redone if you change the edit.

If you only need a label for one shot, the editor is fine. If the labels belong on screen for a whole lesson, put them on the keyboard itself.

Put symbols on keys with a link

Typebar takes typebar:// links from Raycast, Alfred, a script or plain Terminal, and one of them puts a layer of labels on the keys:

open -g "typebar://layer/show?h=s:arrow.left&j=s:arrow.down&k=s:arrow.up&l=s:arrow.right&fill=blank"

Read it piece by piece:

h=s:arrow.left puts the arrow.left symbol on the H key. The part after s: is an SF Symbol name.
j=, k= and l= do the same for the other three keys.
fill=blank shows every other key with no label, so only the four labeled keys stand out.
open -g opens the link without bringing Typebar to the front, so your game or app keeps focus.

For a game that moves with W, A, S and D, the same pattern gives:

open -g "typebar://layer/show?w=s:arrow.up&a=s:arrow.left&s=s:arrow.down&d=s:arrow.right&fill=blank"

Save each one as a script, a Raycast quicklink or an Alfred workflow, and every lesson starts with the board labeled the same way. Control a keyboard overlay from Raycast, Alfred or a script shows where each kind of link lives.

Choosing symbols

The names come from SF Symbols, the symbol set Apple builds into macOS. Apple’s free SF Symbols app, from its developer website, lets you browse them and copy a name. A few that suit tutorials:

Symbol name	What it shows	Good for
`arrow.up`, `arrow.down`, `arrow.left`, `arrow.right`	Plain arrows	Movement, cursor keys, scrolling
`figure.walk`, `figure.run`	A walking and a running figure	Walk and sprint
`hand.raised.fill`	A raised hand	Interact, stop, grab
`bolt.fill`	A lightning bolt	An ability or a boost
`star.fill`	A star	The one key to watch
`magnifyingglass`	A magnifying glass	Search or zoom
`scissors`	Scissors	Cut, or a blade tool in an editor
`flag.fill`	A flag	Set a marker

Pick symbols your viewers will read the same way you do. Arrows need no explaining. A bolt for “dash” probably needs a word of narration the first time it appears.

One symbol from the command line

For a single “watch this key” moment, the typebar command-line tool is quicker than a whole layer. Install it from Settings > Automation, then:

typebar show --position topRight --hide-after-ms 3000 --symbol q=star.fill

This shows the board at the top right with a star on Q for three seconds (3000 milliseconds), then puts the board back as it was: hidden again if it was hidden, in its usual place if it was showing. It suits the moment in a tutorial where you say “and Q is the one that matters here”. Script a repeatable demo with a command-line keyboard overlay builds a full setup script around commands like this.

Add captions with a layer of your own

A symbol alone is sometimes not enough. “Jump” under the Space bar says more than any icon. For words as well as symbols, build a layer in Settings > Layers. Each key in a layer can open an app, type a snippet, send a shortcut, or show a symbol with a caption, and for a tutorial the last one is what you want.

A few things about layers make them suit lessons:

Hold to show. A layer appears while you hold a key you choose, such as right Command, with its own hold time. Press and hold it on camera when you want the labels, and let go when you don’t.
For one app or all. Set a layer to work only in the game or app you are teaching, and it stays out of the way everywhere else.
Shown without holding. The Shortcuts app’s Show Layer action puts one of your saved layers on the board for a few seconds, so you do not have to hold anything on camera. A link like the ones above does the same for its own keys.
Shareable. Every layer is saved to a file you can share. Hand your students the same labels you used in the video.

Keyboard layers on a Mac: put your own actions on a held key covers building one from scratch.

Tips for game and app tutorials

Do a test take with the game. The board appears in screen recordings like any other window, so record the whole display or an area that includes it. A recorder set to capture only the game’s window leaves the board out. If a game offers a windowed mode, try a short take both ways and keep whichever shows the board and the game together.

Show only the keys that matter. fill=blank is the difference between “here are the controls” and a full keyboard where four keys happen to have arrows. Viewers watching gameplay have little attention to spare.

For app tutorials, check the cheatsheets first. Hold a modifier such as Command (⌘) and Typebar relabels the keys with what they do in the app in front, read from its own menus. For apps with single-key tools, including Figma, Photoshop, Blender and Final Cut Pro, hold fn to see those tools on the keys. You may not need custom symbols at all. Figma keyboard shortcuts on a Mac: learning the single-key tools shows this in one app.

Keep the theme readable. Symbols on keys are only useful if they read at video size. A plain, high-contrast theme beats a decorative one here.

Questions

Can macOS label keys with my own symbols?

No. Keyboard Viewer shows the characters your keys type, and the Accessibility Keyboard’s Panel Editor builds clickable panels. Neither puts your own labels on the keys you press.

Where do the symbol names come from?

From SF Symbols, Apple’s symbol set. The free SF Symbols app lists every name, such as arrow.up or star.fill.

Can I add words as well as symbols?

Yes, in a layer you build in Settings > Layers, where a key can show a symbol with a caption.

Typebar is $9 once for up to 5 Macs, and free for 24 hours with everything on.