Deployments

• Vercel: https://eurorack-panel-designer-oss8.vercel.app/
• GitHub Pages: https://ratpi-studio.github.io/Eurorack-Panel-Designer/

Eurorack Panel Designer

Single-page web app to sketch Eurorack front panels. The canvas mirrors a real 3U panel: convert cm/mm/HP on the fly, drop elements (jacks, pots, switches, LEDs, labels), tweak their properties, and export or save layouts locally.

Features

• Canvas-driven editor with zoom, pan, snapping, and optional grid.
• Automatic conversion between centimeters, millimeters, and HP.
• Library of panel elements with editable geometry, rotation, and labels.
• Generated mounting holes that update with the panel width.
• Local projects (save/load/delete) plus JSON, PNG, SVG, KiCad Edge.Cuts (SVG or .kicad_pcb), and STL exports (vector extrusion, thickness picker, and live 3D preview).

Tech stack

• React 19 + Vite with client-side routing.
• Strict TypeScript, unit-tested core logic.
• State managed with Zustand.
• Styling via vanilla-extract.

Getting started

1. Install Node.js 20+.
2. Install the Vite+ CLI (vp) globally.
3. Install dependencies:

   vp install

   This repository is configured for pnpm, and vp will use it automatically.
4. Start the dev server:

   vp dev

   Vite serves the app at http://localhost:5173 by default.

Commands

Command	Description
vp install	Install dependencies through pnpm.
vp dev	Run the Vite dev server with HMR.
vp run build	Type-check then build the production SPA.
vp preview	Preview the production build locally.
vp test	Execute Vitest unit tests.
vp lint	Run oxlint with the project config.
vp check	Run formatting, linting, and type checks.

Usage tips

• Adjust panel width through either the mm or HP input; the other unit updates instantly and the canvas resizes.
• Pick an element in the palette, click on the canvas to place it, then drag to reposition. Use the right-hand panel to fine-tune coordinates, rotation, or dimensions.
• Keep Shift pressed to temporarily disable snapping, Esc to cancel placement, ⌘/Ctrl + Z and ⌘/Ctrl + Shift + Z for undo/redo.
• Shift-click elements or drag a marquee on the canvas to build a multi-selection, then drag anywhere on the canvas to move the entire group or press Delete to remove it in one go.
• Save named projects to the browser, export/import JSON for backups, render the canvas as PNG/SVG, export KiCad Edge.Cuts, or export a clean STL: choose STL in the export dropdown, set thickness in mm, and use the live 3D preview to inspect the mesh before downloading.

KiCad Edge.Cuts export

• Open the export dropdown and pick either KiCad Edge SVG (minimal Edge.Cuts-only SVG) or KiCad PCB (minimal .kicad_pcb with Edge.Cuts lines).
• The SVG is ready for KiCad via File → Import Graphics → Edge.Cuts.
• The .kicad_pcb contains only Edge.Cuts gr_line geometry (outline, circular holes approximated with 32 segments, rectangular cutouts). No copper or silkscreen is added.

Contributing

Issues, feature ideas, and pull requests are welcome. Please open a discussion before large changes and keep business logic within src/lib modules so it remains testable. Keep docs in English.

License

Distributed under the MIT License. Feel free to fork, remix, and build on the project.