Layout Editor

The canvas editor is the main working area of kle-ng. It provides a full set of tools for creating and editing keyboard layouts.

Canvas Tools

The toolbar on the left side of the canvas contains the main editing tools:

Icon	Tool	Description
	Selection Tool	Select, move, resize keys
	Move Exactly Tool	Move keys by a precise amount
	Rotate Selection Tool	Rotate selected keys around anchor points
	Mirror Tool	Create mirrored copies of selected keys
	Extra Tools	Legend Tools, Matrix Coordinates, Move Rotation Origins, Theme Tools, Sanitize Layout, Character Picker

Mouse Controls

Action	Result
Left Click	Select a key
Left Click + Drag	Create a rectangle selection
Ctrl + Left Click	Add/remove key from selection
Middle Click + Drag	Move selected keys

Keyboard Shortcuts

Shortcut	Action
Ctrl+C	Copy selected keys
Ctrl+V	Paste keys from clipboard
Ctrl+X	Cut selected keys
Ctrl+A	Select all keys
Del / Backspace	Delete selected keys
Ctrl+Z	Undo last action
Ctrl+]	Select next key
Ctrl+[	Select previous key
Arrow keys	Nudge selected keys
Shift+←→	Adjust key width
Shift+↑↓	Adjust key height
A	Add new key
/	Toggle label search bar
Shift+M	Open Move Exactly Tool
Shift+R	Open Rotate Selection Tool

Selection Tool

The Selection Tool is the default tool for working with keys.

Selecting Keys

• Click a key to select it
• Click and drag on empty canvas area to draw a rectangle selection
• Hold Ctrl while clicking to add or remove keys from the current selection
• Use Ctrl+[ and Ctrl+] to cycle through keys in layout order

Moving Keys

• Middle mouse button: Click and drag to move the selection
• Arrow keys: Nudge selected keys by the configured step size

Movement snaps to a configurable step size (defined in U, where 1U = width of a standard key). The step size can be set in the canvas footer.

Lock Rotations

The Lock rotations option determines how rotated keys move:

Lock Disabled	Lock Enabled
Rotation origin stays fixed; keys move in rotated coordinate space	Rotation origin moves with the keys; movement occurs in normal coordinate space

Move Exactly Tool

For precise movement use the Move Exactly tool (Shift+M).

The tool allows movement to any position, not limited to the step size. It also supports movement in millimeters by specifying the spacing (mm per U). The default spacing is 19.05 mm/U for both X and Y axes, which is standard for Cherry MX style switches.

Using the Tool

Rotate Selection Tool

Rotate selected keys around anchor points (key corners and centers) using the Rotate Selection tool (Shift+R).

Using the Tool

Mirror Tool

Create mirrored copies of selected keys with the Mirror Tool. Choose a mirror axis position — the axis snaps to multiples of the step size. Supports both vertical (default) and horizontal mirroring from the tool dropdown.

Using the Tool

Extra Tools

Extra tools are grouped under a single button in the left toolbar. There are six:

1. Legend Tools — bulk legend editing
2. Add Switch Matrix Coordinates — assign VIA-style row/column labels
3. Move Rotation Origins — recalculate key positions with a new rotation reference point
4. Theme Tools — apply color themes to the layout
5. Sanitize Layout — find and clean up redundant JSON properties and layout offsets, and warn about overlapping keys
6. Character Picker — search and insert special characters into labels

Legend Tools

Legend tools provide quick canvas-oriented label editing in four modes:

Mode	Description
Edit	Direct label assignment with auto-advancement to next key after Enter
Remove	Remove labels by type (letters, numbers, accents…) or by position on the key
Align	Change label alignment
Move	Move labels from one position to another

In Remove mode, each category button deletes that kind of legend from the selected keys, or from every key when nothing is selected. The key diagram below the buttons removes whatever sits in the position you click.

Edit Mode	Move Mode

TIP

Legend Tools are designed for easier bulk label editing compared to modifying labels one at a time in the Key Properties panel.

Add Switch Matrix Coordinates

This tool assigns VIA-style row,column labels (e.g., 0,0) to each key, enabling compatibility with VIA and Vial configurators and the PCB Generator.

The tool provides an Annotate Automatically option that assigns coordinates intelligently based on key positions. You can also draw rows and columns manually:

WARNING

Automatic annotations may not produce correct results for certain keyboard layouts. Ergonomic layouts with significant column splay (angled columns) are particularly affected and may require manual correction of row/column assignments. Standard rectangular layouts typically produce good results. See issue #51 for details.

Draw Rows	Draw Columns	Remove

• Left-click to start and complete wire segments
• Hold Shift while making the second click to connect two keys directly, skipping any keys the line passes over
• Right-click or Escape to cancel
• Click an existing wire to append to it
• Hold Ctrl while clicking a wire to remove the entire row/column

To renumber a row or column: hover over it in any editing mode and type the new number.

TIP

To export a PNG with the matrix wire overlay visible, open the Add Switch Matrix Coordinates tool first, then use Export → Download PNG.

Move Rotation Origins

The Move Rotation Origins tool reassigns the rotation origin point for keys without changing their visual position on the canvas. This is useful when you want to reference a different pivot point for subsequent rotations — for example, after repositioning a key cluster, you may want the rotation origin to be the new key center rather than the original one.

The tool operates on selected keys, or on all keys if nothing is selected. Two modes are available:

• Use key centers — Calculates and sets the rotation origin to the geometric center of each key individually.
• Manual position — Sets the rotation origin to a fixed X/Y coordinate (in U) for all affected keys.

Theme Tools

The Theme Tools panel applies color themes to the entire layout in bulk. Open it from Extra Tools → Theme Tools.

Choose from several built-in themes in the dropdown:

Theme	Description
Classic	Light gray keys on a gray background — the classic KLE look
Dark	Dark gray keys on a near-black background
VIA	Light gray alphas with darker modifiers, similar to VIA's default display
Gruvbox (dark)	Gruvbox color palette with dark background

Themes are defined as JSON objects with named rules and matcher expressions that target specific keys. You can edit the current theme directly in the JSON editor within the panel, or load and save theme files using Load JSON and Save JSON.

The panel also includes a Color Calculator for converting between stored KLE keycap colors and the rendered key-top colors.

See Color Themes for the full theme format, matcher syntax reference, and examples.

Sanitize Layout

The Sanitize Layout tool scans the layout for redundant data and non-normalized values, and lets you clean them up in bulk. Open it from Extra Tools → Sanitize Layout.

Scanning happens automatically when the panel opens, and issues are grouped into three categories:

Category	Description
Redundant data	Properties left over on keys that no longer need them — for example, a font size or text color set on a label that is now blank, or a rotation origin still stored on a key that isn't rotated
Normalization	Values that are valid but not in their canonical form — for example, a layout that doesn't start at (0,0), or rotation angles outside the -180..180 range
Warnings	Problems the tool can find but must not fix on your behalf, because the fix is a design decision. These have no checkbox and are never touched by Apply Fixes

Each rule shows a count of how many keys or properties it would affect. Rules with a count of zero are disabled — there's nothing to fix. Uncheck any rule you want to skip, then click Apply Fixes to clean up only the checked rules. Use Rescan to re-scan the layout after making changes without closing the panel.

Overlapping keys

The one warning today is Overlapping keys: pairs of keys whose bodies occupy the same space, which makes the layout impossible to build. Rotation and non-rectangular keys (ISO and big-ass enter) are both accounted for, and keys laid flush against each other are not overlapping.

Ghost and decal keys are ignored — neither is a switch. On a multi-layout board, each layout is checked separately, so alternatives that replace one another — an ANSI enter and the ISO enter that takes its place — are never reported against each other. Both VIA layout options and QMK layout membership are understood.

The count is of pairs: one key overlapping two neighbours counts as two. Click Select on the row to select the affected keys on the canvas and see where the problem is.

TIP

Applying fixes creates a single undo step, so Ctrl+Z reverts everything the tool changed at once.

Character Picker

The Character Picker lets you search and insert symbols and special characters — accented letters, arrows, Greek and Cyrillic letters, math symbols, and more — directly into a key's labels without leaving the editor. Open it from Extra Tools → Character Picker.

Select a key, then click into the label position you want to fill. Type in the search box to find a character by name (e.g. "heart", "alpha", "copy"), or browse by category using the tabs above the grid. Click a character tile to insert it at the cursor position in the active label — the panel stays open so you can insert several characters in a row. With multiple keys selected, the character is inserted into the same label position on all of them.

Recently used characters appear in their own row above the grid for quick reuse.

TIP

Hover a character tile to see its name and Unicode code point.

Label Search

Press /, or click the magnifying-glass button in the top-right corner of the canvas, to open the label search bar. Type to find keys by their label text. Matches are highlighted on the canvas. Use Enter or the up/down arrows to cycle through matches. Press Escape or / again to close.

TIP

To export a PNG with search match highlighting visible, keep the search bar open before using Export → Download PNG.

Canvas Settings

A settings panel opens from the gear button in the top-right corner of the canvas. Current settings:

Setting	Description
Show grid	Toggles a dot grid on the canvas aligned to the current step size
Allow label overflow	Draws a word that is too long for its key in full, past the key edge, instead of shortening it with …
Highlight Color	Color used to indicate selected keys. Click the swatch to change it