Visual Compatibility Checker

Data-layer normalized keyboard/keycap specs + SVG rendering + compatibility logic in one interactive view.

Includes mock data, ISO Enter path rendering, north-facing Cherry interference warning, and exploded layer view.

Keyboard Layout

Select PCB/Layout Spec

Keycap Kit

Select Keycap Set Spec

Compatibility Score

99%

Total Keys

Missing

Interference Warn

CompatibleMissing / Size MismatchInterference Risk

Explosion: 44

1u = 50px · gap = 2px · keycap layer lifts and fades for exploded view.

Detected Issues

Tab•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
Q•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
W•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
E•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
R•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
T•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
Y•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
U•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
I•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
O•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
P•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
[•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
]•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
\•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
Caps•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
A•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
S•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
D•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
F•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
G•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
H•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
J•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
K•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
L•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
;•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
'•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
Enter•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
Shift•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
Z•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
X•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
C•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
V•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
B•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
N•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
M•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
,•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
.•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
/•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.
R Shift•Missing / Size Mismatch→Need 1.75u, found 2.25/2.75u.
↑•Interference Risk→Possible north-facing switch interference with Cherry profile keycap.

Rendered with Mock Data

The checker follows a standardized contract, so you can replace mock entries with real keyboard/keycap catalogs later.

• Keyboard source: content/compatibility/keyboards.json
• Keycap source: content/compatibility/keycap-kits.json
• Logic source: lib/compatibility.ts
• Non-rect keycap path: ISO Enter via SVG Path

Keyboard JSON (sample)

{
  "keyboardName": "Keychron Q1 (75%)",
  "pcb_orientation": "north",
  "layout": [
    {
      "label": "Esc",
      "x": 0,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "esc"
    },
    {
      "label": "F1",
      "x": 2,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F2",
      "x": 3,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F3",
      "x": 4,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F4",
      "x": 5,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F5",
      "x": 6.5,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F6",
      "x": 7.5,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F7",
      "x": 8.5,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    },
    {
      "label": "F8",
      "x": 9.5,
      "y": 0,
      "w": 1,
      "h": 1,
      "id": "f_row_1u"
    }
  ]
}

Keycap JSON (sample)

{
  "kitName": "GMK Olivetti Base (Mock)",
  "profile": "cherry",
  "includedKeys": [
    {
      "id": "esc",
      "w": [
        1
      ]
    },
    {
      "id": "f_row_1u",
      "w": [
        1
      ]
    },
    {
      "id": "tilde_1u",
      "w": [
        1
      ]
    },
    {
      "id": "num_1u",
      "w": [
        1
      ]
    },
    {
      "id": "minus_1u",
      "w": [
        1
      ]
    },
    {
      "id": "plus_1u",
      "w": [
        1
      ]
    },
    {
      "id": "backspace",
      "w": [
        2
      ]
    },
    {
      "id": "tab",
      "w": [
        1.5
      ]
    },
    {
      "id": "alpha_1u",
      "w": [
        1
      ]
    }
  ]
}