CASE FILE // EDA / VLSI / WEB
STICKOUT.
ROLE — CREATOR & LEAD FRONTEND ENGINEERTIMELINE — MAY — JUN 2026STATUS — COMPLETE — PRODUCTION DEPTH
Open-source, browser-based EDA tool for creating, editing, and validating VLSI stick diagrams — a custom 2D math viewport on raw HTML5 Canvas with infinite pan/zoom, a Photoshop-style layer stack, and automated design-rule assistants.
HIGHLIGHTS
- ▸ Infinite 2D viewport: screen↔world coordinate transforms, 0.1×–5× zoom, grid snapping at 60fps
- ▸ Same-layer wire crossovers auto-bridge with arc loops; right-click overrides register solid junctions
- ▸ Custom double-pass canvas renderer for LaTeX-style subscripts (V_DD, V_SS)
- ▸ 50-level undo/redo, copy/paste clipboards, auto-save, .stk JSON project files
- ▸ High-resolution export: offscreen canvas at 2× mapping the absolute layout bounding box
ARCHITECTURE
- ▸ Front-end MVC: React owns the document model (elements, layers, undo/redo, selection)
- ▸ CanvasArea routes user input through viewport transforms into world coordinates
- ▸ Raw Canvas 2D render functions paint world → screen at up to 60fps
- ▸ Hotkeys: V select, W wire, P via, L label, B brush, E eraser, Ctrl+Z/Y history
STACK
APP
- React 19
- Vite 8
- HTML5 Canvas
- CSS3
DOMAIN
- VLSI stick layout
- EDA tooling
- LaTeX label rendering
UPLINKS