KLE Compatibility
kle-ng maintains compatibility with the standard KLE JSON format for layouts. However, 100% visual compatibility with keyboard-layout-editor.com is not a goal — the same layout file may render slightly differently between the two editors.
Intentionally Unsupported Features
The following features from the original Keyboard Layout Editor are not supported in kle-ng:
Key Profiles
Different key profiles (keycap shapes/appearance) are not supported. kle-ng uses a single default keycap rendering style for all keys.
Full HTML Label Styling
The original editor supported arbitrary HTML content in key labels with full CSS customization. kle-ng supports only a small subset of HTML tags:
Supported HTML Tags
| Supported | Not Supported |
|---|---|
<br> | <h1>–<h6> (use text size key properties instead) |
<b>, <strong> | <center> (use center label positions instead) |
<i>, <em> | Arbitrary CSS in label content |
<a> | |
<ul>, <ol>, <li> | |
<img> | |
<svg> |
Background Textures and CSS Label Styling
Background textures and highly customized CSS label styling are not supported. kle-ng provides minimal css metadata support specifically for loading web fonts.
Legacy Rendering Quirks
Edge cases and quirks from the original editor's rendering engine are not reproduced.
ta Property (Text Alignment Colors)
kle-ng uses the kle-serial fork. Starting in v0.18.0, it introduced a new KLE property type 'ta' as a solution for color handling problems present in the original editor (#344, #334, #315, #214).
The 'ta' property follows the same semantics as the text size property 'fa'. Layouts using 'ta' can be opened with the legacy editor, but font colors will render differently there.
Icon Compatibility
The original Keyboard Layout Editor supported two sets of internal icons usable as labels:
Unsupported Icon Formats
- Font Awesome Icons (v4.4.0) — e.g.,
<i class='fa fa-github'></i> - Keyboard-Layout-Editor Icons — e.g.,
<i class='kb kb-logo-windows-8'></i>
These icon formats are not supported in kle-ng. This method limits the icon choice to a fixed predefined set and ties appearance to internal CSS definitions. Instead, kle-ng encourages using inline SVGs, which make layouts self-contained and support any icon or graphic. See #42 for background.
Migrating from keyboard-layout-editor.com
If you have existing layouts from the original KLE, here is what to expect when opening them in kle-ng:
Compatible Layouts
Standard alphanumeric layouts — Import and render correctly with no changes needed.
Layouts with Icons
Layouts using Font Awesome or KLE icons — The icon tags (<i class='fa ...'/>, <i class='kb ...'/>) will appear as literal text in the label. Replace them with inline SVG labels to restore the visual.
Layouts with Custom CSS
Layouts relying on heavy CSS customization — Custom colors, borders, and shadows defined in the css field will not take effect. Only @import font rules are processed.
Layouts with Heading Tags
Layouts using heading tags (<h1> through <h6>) — These render as plain text. Use the Default Text Size or per-label text size controls in Key Properties to achieve size variation.
Layouts with Key Profiles
Layouts with key profiles — Profile names are preserved in the JSON but not rendered. All keys use kle-ng's default keycap style.