keymap-fetcher

A Vercel API that returns an SVG diagram of a MacBook Air 13" Japanese (JIS) keyboard with specified keys highlighted. Primary use case: embedding keybinding diagrams in Markdown (GitHub READMEs, blogs).

Demo

Base keyboard (no highlights):

Vim motion keys (hjkl):

Modifier keys:

Usage

Embed in Markdown:

![keymap](https://keymap-fetcher.vercel.app/api/keymap?keys=h,j,k,l)

Or with curl:

curl "https://keymap-fetcher.vercel.app/api/keymap?keys=h,j,k,l" -o keymap.svg

Parameters

Parameter	Description	Example
keys	Comma-separated Vim key notation	h,j,k,l or <C-a>,<Esc>

Key Notation

Keys follow Vim conventions:

Notation	Key
a–z	Letter keys
1–0	Number keys
<Esc>	Escape
<CR>, <Enter>, <Return>	Return/Enter
<BS>, <Backspace>, <Del>	Delete
<Tab>	Tab
<Space>, space	Space bar
<Comma>, comma	, (comma)
<Up>, <Down>, <Left>, <Right>	Arrow keys
<F1>–<F12>	Function keys
<C-x>	Ctrl + x
<S-x>	Shift + x
<D-x>	Command (⌘) + x
<M-x>, <A-x>	Option (⌥) + x
ctrl, shift, cmd, opt, alt, fn, caps	Modifier keys alone
shift-l, shift-r, cmd-l, cmd-r	Shift/Command with side
-, ^, ¥, @, [, ;, :, ], ., /, _	Symbol keys

Self-hosting on Vercel

git clone https://github.com/masaki39/keymap-fetcher.git
cd keymap-fetcher
npm install
vercel deploy

Feedback

Please report issues at GitHub Issues.