XKeyboard — Keyboard Diagram

A pure-SVG keyboard diagram component, zero third-party dependencies. Ships with 5 layout presets and supports key annotation lines, zone labels, and hover/click linked highlighting — ideal for product docs, shortcut references, and operation guides.

Live Demo

<XKeyboard
  type="full"
  :keys="{ Esc: 'Exit/Back', Win: 'Start menu', Space: 'Spacebar' }"
  :show-group-label="true"
/>

Props

Prop	Type	Default	Description
type	string	'full'	Layout preset (see table below)
keys	Record<string, string>	{}	Key annotations { keyName: text }; key names must match the layout
width	number	920	Max width (px); scales down proportionally when the container is narrower
height	number	0	Height (px); 0 means auto-adapt to the viewBox ratio
keyColor	string	''	Keycap fill color; empty falls back to --surface
keyTextColor	string	''	Keycap text color; empty falls back to --text-1
accentColor	string	''	Accent color; empty falls back to --brand-1
lineColor	string	''	Annotation line color; empty falls back to --brand-1
labelColor	string	''	Annotation text color; empty falls back to --text-2
showKeyLabel	boolean	true	Whether to draw keycap text
showGroupLabel	boolean	false	Whether to show zone labels
annotations	boolean	true	Whether to draw annotation lines and labels
highlightKeys	string[]	[]	Array of key names to highlight

Events

Event	Callback argument	Description
select	(name: string)	Fired when any key is clicked, returning that key's name

Layout Presets

type	Composition	Canvas ratio
alpha	Three alpha rows (QWERTY / ASDF / ZXCV)	Wide & flat
numeric	Numpad (NumLk / arithmetic / double-height + Enter)	Near square
full	Function row + main keyboard + edit keys + arrow keys + numpad	Wide & flat
laptop	Function row + main keyboard (Menu replaced by Fn) + arrow keys	Wide & flat
laptopTouch	Same as laptop, with a touchpad drawn below the keyboard	Slightly taller

Usage Notes

• Color props fall back to theme CSS variables when left empty; dark mode needs no extra configuration.
• Annotation keys are grouped to an edge based on their position relative to the keyboard center; labels on the same edge spread along the edge to avoid overlap.
• Key names must match the layout exactly to take effect (e.g. Bksp not Backspace, ↑ not Up).
• Pure SVG, scales without distortion, no ResizeObserver needed.