StickOut is an open-source, professional-grade, interactive, browser-based EDA (Electronic Design Automation) tool designed for drawing and editing VLSI stick diagrams. Featuring a modern dark-mode interface, a highly responsive pannable/zoomable canvas, and comprehensive layer management, it allows hardware engineers, researchers, and students to quickly map out silicon-level layouts, manage connectivity, and export publication-ready high-resolution assets.
⚡ Try it online: stickout.vercel.app
- Designed with a clean glassmorphism palette, harmonious slate gradients, and sleek transitions.
- Interactive, responsive toolbar buttons, collapsible HUD overlays, and sidebar controls.
- Pannable & Zoomable: Left-click and drag while holding
Space(or use middle-mouse button) to pan; mouse wheel to zoom dynamically centered on the cursor. - Grid & Snapping: Optional visual grid pitch (
Gto toggle) with precise grid snapping (Sto toggle) to keep wiring aligned. - Interactive Ghosting: Dragging selected components displays a semi-transparent "ghost" of their original position to help visualize grid offsets before release.
- Same-Layer Jumps: When orthogonal lines of the same layer/color cross, the horizontal line automatically draws a curved bridge arc ("jump") to indicate they are not electrically connected. PMOS and NMOS wires crossing poly, for example, will cross normally (different layers).
- Right-Click Connection Overrides: Right-clicking any active jump point dynamically toggles its electrical state. Overridden crossovers render as solid line intersections (normal crossings), indicating a connection. Right-click again to restore the jump.
Supports full independent control over all standard VLSI layout layers:
- 🔵 Metal 1 (M1): Blue solid line (
#4A90E2) for standard metal interconnects. - 🔴 Metal 2 (M2): Red solid line (
#C0392B) for secondary orthogonal routing. - 🟡 P-Diffusion (P-Active): Yellow solid line (
#F1C40F) representing PMOS source/drain regions. - 🟢 N-Diffusion (N-Active): Green solid line (
#27AE60) representing NMOS source/drain regions. - 🟣 Polysilicon (Poly): Purple (
#9B59B6) by default, toggleable to Red (#E74C3C) in the Properties panel, representing transistor gate layers. - 🔲 Contacts: Black outline (light theme) or White outline (dark theme) for M1 to Silicon/Poly connections.
- 🔲 Vias: Magenta solid square (
#FF00FF) for Metal-to-Metal (M1↔M2) connections. - 🟫 N-Well / P-Well: Brown dashed boundary (
#795548) for bulk isolation regions. - 🟫 Demarcation Line: Thin brown dashed line (
#8D6E63) separating NMOS and PMOS regions. - 🟢 N+ Implant / P+ Implant: Dashed green (
#43A047) and yellow (#F9A825) outlines for region doping. - 🔲 Buried Contact: Specialized silicon-to-gate connection layer (
#111111). - 🔘 Silicide Block: Gray dashed pattern (
#9E9E9E) for resistor/ESD structures. - 🟠 Thick Oxide (High-V): Orange dashed outline (
#FF6D00) for high-voltage transistors. - 🎨 Dynamic Higher Metals (M3, M4, etc.): Dynamically add higher metal layers with customizable colors.
- Visibility (Eye Icon): Toggle layer rendering on/off. Hidden elements are immune to selection, dragging, and are skipped in PNG exports.
- Locking (Lock Icon): Toggle selection lock. Locked elements remain visible but cannot be modified, moved, or deleted.
- Opacity Slider: Control drawing opacity (10% to 100%) dynamically reflected on the canvas and in export images.
- Drag-and-Drop Reordering: Drag and drop layers to rearrange their rendering stack order (bottom to top).
- Custom Canvas Layers: Add, rename, or delete custom drawing layers to group annotation and design elements.
- Automatically saves the complete workspace layout, layer properties, and canvas state to browser localStorage on any modification.
- Debounced auto-save triggers silently to prevent performance stutter, and auto-restores state cleanly on app mount with a UI toast notification.
- Placing a Via directly on top of a Contact at the same grid point automatically converts both to standard Square shapes and applies a small visual offset (1.5px).
- This creates the industry-standard "stacked squares" visual style used to represent direct Metal 2 to Polysilicon connections.
- Select the custom color swatch to draw wires in any custom color.
- Houses a native HTML5 color picker to choose any custom color.
- Automatically places custom-colored elements on the Custom Layer for easy grouping.
- Text labels automatically parse LaTeX-style math subscript formatting. For example, inputs like
V_{DD},V_DD,V_{SS}, andV_SSrender as elegant, publication-quality serif italic subscript text. - Supports left and center alignment toggles, as well as toggling the background pill container off for clean, plain text labeling directly on rails.
- Under File -> Export PNG..., crops output dimensions exactly to the boundary of the elements drawn (plus padding).
- Adjustable margin size (4 grid units, 3 grid units, or none).
- Background options: Transparent, White, or Dark.
- Customizable label text styles: Dark text, Light text, or Pill background.
- Crisp 2x high-resolution scaling suitable for reports, papers, and presentations.
- Switch to the Paintbrush tool to draw freehand markups and annotations directly onto the canvas.
- Features adjustable brush stroke sizes and opacity percentages.
- Use the Eraser tool to cleanly erase brush stroke segments.
- Full support for standard clipboard commands: Copy (
Ctrl + C), Cut (Ctrl + X), and Paste (Ctrl + V). - Duplicate (
Ctrl + D) replicates the selected elements with a 1-grid-pitch diagonal offset for modular cell replication.
- Reorder layer rendering stack on the fly using hotkeys.
- Selected elements' canvas layers can be sent upward (
Ctrl + ]), downward (Ctrl + [), all the way to the top (Ctrl + Shift + ]), or all the way to the bottom (Ctrl + Shift + [).
- Dragging the endpoint of a selected wire when multiple wires are selected scales all selected wires proportionally.
- Constrain modifications to clean integer grid multiples by holding the
Shiftkey while scaling.
- Framework: React + Vite (HMR enabled)
- Canvas API: HTML5 Canvas for high-performance interactive rendering.
- Styling: Pure CSS3 with custom variables for full theme flexibility.
- Icons: Lucide React for crisp, scalable vector graphics.
Make sure you have Node.js (version 16 or higher) and npm installed.
- Clone the repository:
git clone https://github.com/Aera0908/stickOut.git cd stickOut - Install the dependencies:
npm install
- Start the local development server:
npm run dev
- Open your browser and navigate to
http://localhost:5173/.
To build the application for deployment:
npm run buildThe compiled static assets will be located in the dist/ directory.
The floating Shortcuts HUD in the bottom-left corner of the canvas displays the active hotkeys:
| Key | Action |
|---|---|
| V | Activate Select / Pointer Tool |
| W | Activate Wire / Line Tool |
| P | Activate Via / Contact Tool |
| L or T | Activate Label / Text Tool |
| B | Activate Freehand Paintbrush Tool |
| E | Activate Eraser Tool |
| G | Toggle Canvas Grid Visibility |
| S | Toggle Grid Snapping |
| Space + Drag | Pan Canvas (or drag with middle-mouse wheel click) |
| Del / Backspace | Delete Selected Element(s) |
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Ctrl + S | Save Project (.stk file) |
| Ctrl + O | Open Project (.stk file) |
| Ctrl + A | Select All Unlocked Elements |
| Ctrl + C | Copy selected elements |
| Ctrl + X | Cut selected elements |
| Ctrl + V | Paste clipboard contents |
| Ctrl + D | Duplicate selection (offset by 1 grid pitch) |
| Ctrl + [ | Move selected element's layer down one step |
| Ctrl + ] | Move selected element's layer up one step |
| Ctrl + Shift + [ | Move layer to bottom of rendering stack |
| Ctrl + Shift + ] | Move layer to top of rendering stack |
| Esc | Cancel current wire draw or clear selections |
stick-diagram/
├── public/ # Static assets (Favicons, SVG graphics)
├── src/
│ ├── assets/ # Images, logos, and verification media
│ ├── App.css # Modular layout and styling definitions
│ ├── App.jsx # React logic, Canvas rendering, and event handlers
│ ├── index.css # Global resets and CSS variables (UI themes)
│ └── main.jsx # React root application entrypoint
├── index.html # HTML5 template wrapper
├── package.json # Scripts and dependencies
└── vite.config.js # Vite configurations
Developed with ❤️ by Aira Josh Ynte:
- 🌐 LinkedIn: aira-josh-ynte
- 📄 Web Resume: aera0908.github.io
- 💻 GitHub: @Aera0908
- 🐦 X (Twitter): @aera0908
- 💬 Discord: aeradynamics
This project is open-source and licensed under the MIT License.