Simple Circuit Engine logo Simple Circuit Engine - Demo

About This project

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

Three.js Vite TypeScript ES2022

Edition Mode

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

Navigation Controls

  • Click an empty space, hold and drag to navigate
  • Right Click hold and drag to pan/rotate camera
  • Scroll to zoom in/out

Tools

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

  • Build: Main edition tool handling update/drag/copy/delete features
  • Add component: Add a new component among components library
  • 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.

Build Tool

The main edition tool for selecting, moving, connecting, and modifying circuit elements.

Selection & Movement

  • Click to select components, pins, branching points or wires
  • Hold click on components and wires to Drag them
  • Double-click on a branching point to drag it

Wire Creation

  • Hold click on pins or branching points to create a new wire
  • Release on a pin/branching point/wire to finalize the connection
  • Release on empty space to make a new branching point
  • Double-click on empty space to create a branching point

Component Actions

  • Double-click or R on a component to rotate it 90°
  • Delete to delete selected element
  • Escape to cancel Drag/new wire ongoing operation

Configuration & Copy

  • Ctrl+Shift+Click a component to open its configuration form
  • Escape to cancel Drag/new wire ongoing operation
  • Ctrl+Click a component to change its initialState or activation logic
  • Ctrl+Click a pin/branching point to set it at Voltage, Ground or Neutral.
  • Ctrl+C/Ctrl+V to copy/paste selected component

Add Component Tool

Add new components from the library to your circuit.

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

Usage

  • Select a component type from the list in the sidebar
  • Click on the grid to place the component
  • Scroll to rotate the future component before placing
  • Ctrl+Scroll to change the component type
  • Escape to set component type to None

Multi-Select Tool

Select and manipulate multiple objects at once. Trigger automatic changes of the grid size.

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

Selection

  • Click and drag to draw a selection rectangle
  • Release click to finalize selection
  • All objects within the rectangle will be selected

Moving Selection

  • Click a selected object to drag the whole selection
  • Release click to end 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 Mode

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

  • Use 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 switches to toggle their state
  • 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 circulating current

Load and save circuits

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.

Export Circuit

Circuit ▾
Mode
Edit Tools ▾
    Simulation Controls ▾
    Tick: 0
    Mode: Edit
    Circuit: Not loaded
    Active Tool: Build
    SIMULATION MODE
    Drop JSON file to load circuit