Vial Keyboard Layers
See every layer of your Vial keyboard layout on one screen, in plain words instead of raw keycodes.
Run it now
Then, in Vial, File, Save current layout, and drop the .vil on the page.
- Nothing collected. No account, no tracking, no uploads. Your
.vil never leaves your machine.
- Lightweight. One HTML file, about 120 KB, no dependencies, no build step.
- Four ways in. A browser tab, an installed web app, its own Mac app, or a Chrome window on a hotkey. See Ways to open it.
Contents: Why · How to use it · Ways to open it · Privacy · What it works with · Limitations · Related tools · Files · Support
Why it exists
Learning a layered layout on a small keyboard means forgetting what is on each layer, a lot.
- Vial shows one layer at a time, with tap dances as
TD(3) and mod-taps as raw codes. Answering "where is Page Down?" means opening the configurator, clicking through layers and decoding keycodes.
- On a Mac, the Vial desktop app is Intel-only. It runs through Rosetta, which Apple is winding down.
This page is the quick answer: one file, opened in a browser, showing every layer at once, Miryoku-style.
| Vial shows | This page shows |
|---|
LSFT_T(KC_A) | A, with Shift on hold |
TD(3) | Space, with Nav on hold |
LGUI(KC_Z) | Undo |
Each key shows its base legend at the top left, then what it does on each other layer in words, one colour and one fixed place per layer, and what it does on hold at the bottom right.
How to use it
- Open the page, any of the ways to open it. It opens with a built-in example layout.
- Save your layout from Vial. File, Save current layout. That writes a
.vil file.
- Load it. Click Load .vil (the accented button in the toolbar, or press
O) and choose the file, or drop it anywhere on the page.
Your layout shows straight away. A note says Loaded your-file.vil · 5 layers, and the Load button shows your file's name from then on, so you can always see which layout is on.
Your layout is kept
- It stays after a reload. The last
.vil you loaded is kept in that browser (local storage), so the page opens on your layout next time, not the example.
- Your names stay with it. Names you give keys and layers are kept per layout (by the keyboard's
uid), so they come back whenever that layout is loaded.
- Back to the example: the round-arrow button beside Load .vil (it shows only while your own file is loaded). Your names are not deleted; load your file again and they are back.
- Loading another
.vil replaces the one kept. Nothing leaves your machine.
Reading the map
-
Hover or click a key to see everything it does on every layer, in words, with the raw keycode alongside.
- The tooltip puts each action on its own line: a tap dance's tap, hold, double-tap and tap then hold, and what Shift types.
- Keys are drawn as keycaps. Hovering presses one half way. Clicking pins it, pressed down, until you click it again (or
Tab to it and press Enter; Esc releases it).
- With reduced motion set in your system, the keys change shade without moving.
-
Double-click a layer name to rename it. Names are guessed from the contents (arrows make Nav, mouse keys Mouse, media keys Media, digits Num). Your renames are remembered per layout.
-
A + after a legend means the key does more (double-tap, tap then hold). The single-layer view spells it out.
-
One layer on its own (press its number): larger legends, each extra on its own line, and the key you hold to reach the layer outlined.
-
Small raised characters after a digit or symbol are what Shift types, as on a keycap: /?, 3#. More below.
-
The version shows in the footer (v1.3.1), linking to its release notes.
-
An empty layer is a small dimmed number in a dashed outline among the layer buttons. Click it (or press its number) and it says it's empty; it has no place on the keys.
-
Under the map: the tap dances, macros, combos and key overrides in use.
-
Open on a layer: index.html?layer=1 opens straight onto layer 1; ?layer=all onto the overview.
-
The credit bar stays pinned to the bottom of the window, and the keyboard fits above it. Built by Dileepa Ranawake links to the author's GitHub profile, the GitHub icon to this repo, the LinkedIn icon to LinkedIn, and Buy me a coffee to Ko-fi.
| Key | Does |
|---|
0 to 9 | Show that layer on its own, with larger legends. The key you hold to reach it is outlined and labelled |
Esc or A | Back to all layers at once |
Left / Right | Previous or next layer |
O | Load your .vil |
M | Mac or PC labels (Cmd and symbols, or Win and words) |
L | US or UK keyboard layout on your computer, for what Shift types |
V | Open Vial web in a new tab, to change the layout |
? | Shortcut help |
This is the beginning of the README. Read the rest at the original. Read the full README ↗
