A simple React web application for simulating digital logic circuits. This project allows users to build and test logic circuits using drag-and-drop components.
- Author: Timothée Blanpied
- Created: 2023/07
- Live Demo: https://logicsim.demo.blanpied.fr
- Drag-and-drop logic gates (AND, NOT)
- Interactive components: Push Button, Switch, Light Bulb, Clock, 7-Segment Display
- Custom SVG-based wire connections that light up when signals pass through
- Zoom and pan functionality
- Dark/light theme toggle
- React 18
- JavaScript (ES6+)
- HTML5
- CSS3
- Custom SVG for components and wires
- Node.js >= 8.10
- npm >= 5.6
-
Clone the repository:
git clone https://github.com/tblanpied/LogicSim.git cd logicsim -
Install dependencies:
npm install
-
Start the development server:
npm start
Open http://localhost:3000 in your browser.
- Select components from the sidebar and drag them onto the breadboard.
- Connect components by drawing wires between connection points.
- Use the toolbar to select, delete, or rotate components.
- Toggle switches and buttons to see circuit behavior in real-time.
src/
├── components/ # Logic gate and component implementations
│ ├── js/ # Component logic
│ ├── css/ # Component styles
│ ├── svg/ # Custom SVG assets
│ └── img/ # Images
├── UI/ # User interface components
│ ├── js/ # UI component logic
│ ├── css/ # UI styles
│ └── svg/ # UI icons
├── App.js # Main app component
├── index.js # App entry point
└── config.js # Configuration
- No saving/loading of circuits
- Limited to predefined components (no custom gates)
- Prototype-level implementation
This project is licensed under the MIT License - see the LICENSE file for details.
This project is provided as-is for educational purposes and is not actively maintained for contributions.