Docs component gallery
Live demos of every custom component available to documentation authors.
Every component in CONTENT_GUIDE.md’s table, rendered live. Import them from
@components/*. (The rest of src/components/ is Starlight overrides and
homepage furniture, not building blocks for a page.) The conventions live in
CONTENT_GUIDE.md.
Inline
Section titled “Inline”Keys: press Shift then ?123, or hold Space. Editions: Full edition only Lite edition only All editions. Versions: Since v1.4.
Settings location chip:
WM KeyboardTypingGesturesSpacebar swipesPhoneFrame
Section titled “PhoneFrame”Left empty, it renders the screenshot-pending placeholder. Given an image (or a
<video>), it renders a device frame:
LayoutExplorer
Section titled “LayoutExplorer”Renders any .wmlayout.json straight from app/src/main/assets/layouts/.
Import the file, then pass it in. Keys with alternates show the first one as a
corner hint; hover or tap that key for the full long-press set. A layout whose
keys carry shift labels gets a ⇧ toggle:
Hover or tap a key with a corner hint to see all its long-press characters.
Hover or tap a key with a corner hint to see all its long-press characters.
ThemePreview
Section titled “ThemePreview”Renders real theme specs (the same format as .wmtheme.json exports)
on a mock keyboard. The showcase set exercises gradients (linear, radial,
sweep), translucent keys, pill/cut key shapes, borders, key sheens and the
HUE_CYCLE animation:
Pass specs to render an actual export file:
FilterTable
Section titled “FilterTable”Client-filterable, sortable table for big datasets. It’s live on the
language overview (843 rows) and
dictionaries (333 rows) pages. The data is
generated from the app’s registries by docs/scripts/extract_data.py:
| Id | Name | Script |
|---|---|---|
| en | English | Latin |
| bn | বাংলা · Bangla | Bengali |
| fr | Français · French | Latin |
| de | Deutsch · German | Latin |
| es | Español · Spanish | Latin |
| ko | 한국어 · Korean | Hangul |
| ru | Русский · Russian | Cyrillic |
| ar | العربية · Arabic | Arabic |
| el | Ελληνικά · Greek | Greek |
| he | עברית · Hebrew | Hebrew |
| hi | हिन्दी · Hindi | Devanagari |
| pt | Português · Portuguese | Latin |
| uk | Українська · Ukrainian | Cyrillic |
| it | Italiano · Italian | Latin |
| nl | Nederlands · Dutch | Latin |
| pl | Polski · Polish | Latin |
| sv | Svenska · Swedish | Latin |
| sr | Српски · Serbian | Cyrillic |
| bg | Български · Bulgarian | Cyrillic |
| ka | ქართული · Georgian | Georgian |
| cs | Čeština · Czech | Latin |
| sk | Slovenčina · Slovak | Latin |
| ro | Română · Romanian | Latin |
| hu | Magyar · Hungarian | Latin |
| fi | Suomi · Finnish | Latin |
| da | Dansk · Danish | Latin |
| nb | Norsk · Norwegian | Latin |
| hr | Hrvatski · Croatian | Latin |
| fa | فارسی · Persian | Arabic |
| be | Беларуская · Belarusian | Cyrillic |
| et | Eesti · Estonian | Latin |
| lt | Lietuvių · Lithuanian | Latin |
| lv | Latviešu · Latvian | Latin |
| sl | Slovenščina · Slovenian | Latin |
| ur | اردو · Urdu | Arabic |
| ps | پښتو · Pashto | Arabic |
| sd | سنڌي · Sindhi | Arabic |
| ug | ئۇيغۇرچە · Uyghur | Arabic |
| ckb | کوردی · Kurdish (Sorani) | Arabic |
| hy | Հայերեն · Armenian | Armenian |
GestureDemo
Section titled “GestureDemo”Stylised, looping gesture explainers. They illustrate concepts, so use a screen recording when you need the real behaviour. Four types:
All four freeze to a static end-state under prefers-reduced-motion.