Corne v4.1 Interactive Layout Visualizer

A robust, local web application for visualizing and editing a 46-key Corne v4.1 split keyboard layout. It features a modern, interactive UI that accurately maps the physical columnar stagger, thumb arcs, and inner macro keys of the Corne v4, while allowing you to edit and persist your layout mappings locally.

Features

• Accurate Corne v4 Geometry:
  • True-to-life columnar stagger and ergonomic thumb "smile" arcs (outer thumb angled inward, middle thumb flat, inner thumb angled inward).
  • Support for the 46-key layout, including the inner macro column (M1-M4) and accurate OLED placement.
• Interactive Layout Studio:
  • Click any key on the visualizer to open the Editor Panel.
  • Modify Primary, Secondary (top), and Sub (bottom) legends.
  • Assign color-coded categories (e.g., Modifier, Navigation, Application, Layer Switcher).
• Data Persistence:
  • Edits are saved locally to data.json via a lightweight Express backend, ensuring your layout changes persist across sessions.

Project Structure

corne-v4-visualizer/
├── package.json       # Project dependencies and npm scripts
├── server.js          # Express backend for serving static files and API endpoints
├── data.json          # Persistent JSON storage containing all layer mappings
└── public/            # Frontend assets
    ├── index.html     # Default 3-column UI layout & Editor Panel
    ├── one-col.html   # Alternative 1-column stacked layout
    ├── styles.css     # Theming, matrix geometry, and responsive grid layout
    └── app.js         # Frontend logic (fetching data, rendering keys, editor state)

Setup & Installation

Ensure you have Node.js installed on your machine.

1. Install Dependencies: Open a terminal in the project directory and run:

   npm install

   This installs express and cors.

2. Start the Application: Run the local server:

   npm start

3. Open the Visualizer: Navigate to http://localhost:3000 in your web browser.

Build Instructions (Static Mode)

While you can run the interactive development server to edit your layout, you may also want a lightweight, read-only static version of the visualizer that doesn't require a Node.js backend to run.

To generate a static build:

npm run build

What this does:

1. Compiles the data.json file into a standalone data.js script.
2. Copies all frontend assets (index.html, app.js, styles.css) into a new dist/ folder.
3. Automatically injects data.js into the HTML and gracefully strips out the Editor Panel code.

You can then host the contents of the dist/ folder on any static web host (like GitHub Pages, Netlify, or Vercel) or simply open dist/index.html directly in your browser.

Usage

1. Viewing Layers: Use the tabs at the top to switch between your configured layers (e.g., Base, CapsLock, Lower, Raise).
2. Editing Keys: Click on any keycap on the board. The Editor Panel will appear above the legend.
3. Saving Changes: Modify the key's properties and click 💾 Save Changes. The visualizer will update instantly, and the changes will be written directly to data.json.
4. Theming: Use the Toggle Dark Mode button to switch between the crisp light theme and the high-contrast dark theme.