Skip to content
Anderson F. González
Español
Back to work

CircuitBreve: a logic circuit simulator in the browser

You write a circuit in a language of its own, it compiles as you type and is drawn as a schematic. You can toggle the inputs to watch the signal propagate, get the truth table and export the result.

Type
Open source, team of two
My part
The React application. 9 of the 14 commits1 are mine; the Python image-scanning prototype was added by another contributor.
Period
May 2026
Stack
React 19, TypeScript, Vite 7, Tailwind 4
License
MIT

Try the demoCode on GitHub

What it does

  • A language of its own (HDL) with modules, gates, inputs, outputs and nested expressions.
  • It compiles as you type, with a 400 ms debounce.
  • It draws the schematic in SVG with zoom and drag. Click an input and the signal propagates.
  • It generates the truth table for up to 10 inputs (1,024 rows)2 and extracts the Boolean expressions of the outputs.
  • It exports to SVG, PNG at 3x and PDF.

Click A, B or Cin, or focus them and press Enter or Space.

XORANDXORANDORA1B1Cin0Sum0Cout1

1 + 1 + 0 = 10 (in binary)

Truth table
ABCinSumCout
00000
00110
01010
01101
10010
10101
11001
11111
The same circuit as the screenshots: two half adders and an OR gate. Switch the inputs and watch the signal travel.
CircuitBreve in the light theme: a code editor on the left and the schematic of a full adder on the right, with inputs A, B and Cin switched on.
A full adder written with two half-adder modules, with all three inputs on.
The truth table tab of CircuitBreve showing the eight input combinations of the full adder.
The truth table of the same circuit, generated from the schematic.

How it's built

Everything happens in the browser, with no server. The code is split by stage: a compiler (lexer, parser and graph builder), a simulator, a Sugiyama-style layered layout engine and the interface components. It is about 4,500 lines of TypeScript3.

The only runtime dependencies are React, clsx, tailwind-merge and an icon package4. There are no graph or circuit libraries: the parser, the simulation and the schematic layout are project code.

Limits

  • It has no automated tests and no continuous integration.
  • The image-to-HDL scan is a prototype.
  • The language requires every signal to be defined before it is used.

Sources for the figures

  1. 1

    Commit authorship in CircuitBreve

    git log of Albonire/CircuitBreve (public) · October 9, 2026

    Fabian Gonzalez (my git user) 9, another contributor 4 (backend and a copy of the frontend) and ImgBot 1: 14 in total.

    github.com/Albonire/CircuitBreve

  2. 2

    Declared capabilities of CircuitBreve

    README of Albonire/CircuitBreve (public)

    Truth tables for up to 10 inputs (1,024 rows) and export to SVG, PNG at 3x and PDF.

    github.com/Albonire/CircuitBreve

  3. 3

    Size of the CircuitBreve code

    .ts and .tsx files under src/ in Albonire/CircuitBreve (public) · October 9, 2026

    4,544 lines.

    github.com/Albonire/CircuitBreve

  4. 4

    Runtime dependencies of CircuitBreve

    package.json of Albonire/CircuitBreve (public)

    clsx, lucide-react, react, react-dom and tailwind-merge. No graph or circuit libraries.

    github.com/Albonire/CircuitBreve