<x-keyboard>

A zero-dependency web component to display and emulate keyboard layouts.

Online demo here.

Keyboard Layouts

This component uses Kalamine layouts in a JSON format describing:

• the base and AltGr/Option layers, i.e. the characters that each key outputs;

• the list of all dead keys used by the layout;

• the default keyboard geometry.

All keyboard layouts used in the demo page are defined in the layouts.yaml directory,then converted to JSON by Kalamine (see layouts).

Layout Emulation

Once the keyboard layout is loaded, emulating it should be straight-forward (see demo.js). This relies on the KeyboardEvent’s code property, which excludes IE & Edge at the moment.

Supported Browsers

Works with Firefox and Chrome and probably all browsers with native web component support.