Simple Circuit Engine is an open source educational electronic circuits Build & Simulation engine using THREE.js 3D visualization.

Design digital logic circuits visually, connect components with wires, and simulate their behavior in real-time.

The idea originated in 2022 during my reading of Charles Petzold's CODE, a beautiful book which provided me with the most comprehensive way of understanding how a bunk of circuitry can become a programmable computer.

I Thank Charles Petzold for his inspirational book and MrDoob for the amazing Three.js library which makes this project possible.

GitHub npm

Edition mode allows you to build and modify circuits by adding components, creating wire connections, and arranging your design.

Navigation Controls

• Hold Click an empty space and Drag to Navigate
• Hold Right Click and Drag to Pan/Rotate the camera
• Scroll to Zoom in/out

Tools

In the sidebar, Click to Choose the tool to activate :

• Build (Default): Main edition tool managing add/update/drag/copy/delete features
• Multi-Select: Select an area with multiple objects for moving, copying or deleting them all at once

Click the ? button next to each tool for detailed instructions.

The main edition tool for adding & removing, connecting, and modifying circuit elements.

Component Actions

• Double-Click an empty place to Open the component library widget
• On the widget Click to Choose the components group (basic, gates...) and then the type you want to add
• Go back to the grid and Click to Position this new component
• Standalone branching points (first basic component) can be added this way too

Selection & Movement

• Click to Select components, pins, branching points or wires
• Hold Click on a component or wire to Drag it
• Double-Click on a branching point to Drag it

Wire Creation

• Hold Click on pins or branching points and Drag to Create a new wire
• Release on a pin/branching point/wire to Finalize the connection
• Release on empty space to Create a new connected branching point

Rollback and Delete

• Escape to Cancel drag or new wire/component ongoing operation
• Delete to Remove the selected element

Configuration & Copy

• Ctrl+Shift+Click a component to Open configuration form
• Escape to Close configuration form
• Ctrl+Click a component to Invert its activation Logic, or for a Switch its initial State
• Ctrl+Click a pin/branching point to Set at Voltage, Ground or Neutral.
• Ctrl+C/Ctrl+V to Copy/Paste selected component

Select and manipulate multiple objects at once.

Note: Map navigation is disabled when this tool is active.

Selection

• Hold Click and Drag to Draw Selection rectangle
• Release Click to Finalize selection
• All objects within the rectangle will be selected

Moving Selection

• Hold Click a selected object to Drag the whole selection
• Release Click to Finalize drag
• Escape to Cancel ongoing drag operation
• Click an empty space to Cancel selection

Copy & Paste

• Ctrl+C/Ctrl+V to Copy/Paste selection
• Ctrl+X/Ctrl+V to Cut/Paste selection

Simulation runs your circuit and shows how signals propagate through the wires and components in real-time.

Controls

• Play - Start continuous simulation
• Pause - Pause the simulation (preserves state)
• Step - Advance simulation by one tick
• Stop / Reset - Stop simulation and reset all states

Speed

• Slide the Speed slider to adjust ticks per second (TPS)
• Higher values = faster simulation
• Use Step mode for debugging complex circuits

Interacting

In simulation mode, you can interact only with Switches.

• Click on a Switch to Toggle its state (Open/Closed)
• Watch wires and components change based on circuit logic
• The tick counter shows current simulation step

Wire Visual Feedback

• White Wire without connection to voltage or current
• Red Wire under voltage but without current flowing
• Blue Wire connected to ground (electron sink) but without voltage
• Magenta Wire connected both to ground and voltage with flowing current

Choose, save or start a new circuit.

Preset circuits

Open a demo circuit from the list.

Import

Load and open a circuit file from your device. You can also drag circuit json file into the scene canva to load it.

Export

Saves the current circuit on your device.

Clear

Clear the current circuit and start a new one.

Circuit name