An interactive circuit designer built with React 19 and TypeScript.
- Interactive Canvas: Zoom, pan, and grid-based design environment.
- Wire Routing: Advanced bezier curve routing with control points.
- Image Import: Import, crop, and place pins on component images.
- Tool System: Select and Wire tools for different interaction modes.
- History: Undo/redo functionality for all operations.
- Properties Panel: Edit component properties, align pins, and manage connections.
- Node.js 18.0+
- npm, yarn, or pnpm
-
Clone the repository:
git clone git@github.com:raushanraja/circuitgrid.git cd circuitgrid -
Install dependencies:
npm install
-
Start the development server:
npm run dev
Interactive canvas with box components and wire routing
Customizable wire colors with preset and custom options
Image cropping with adjustable area selection
Pin placement with alignment tools and grid snapping
Imported component with custom pins and wire connections
CircuitGrid uses a modular architecture based on React 19 and TypeScript.
- State Management: Custom hooks (
useCircuitState,useCanvasInteraction) - Rendering: SVG-based canvas
- Styling: Tailwind CSS
- Icons: Lucide React
MIT