tscircuit: Shipping Hardware at the Speed of a Pull Request

How a React Fiber reconciler is replacing the GUI-heavy CAD tools of the past with a "Web-native" hardware compiler.

8 min read • View on GitHub • More from tscircuit

A magnifying glass over React code revealing physical copper traces.
By treating a circuit board as a DOM, tscircuit allows developers to build physical devices using standard web paradigms.
Editorial portrait of Seve

tscircuit makes developing electronics like web development. Edit code in your favorite IDE and watch the changes create electronics in realtime. When you're done, export your project and manufacture!

— Seve, Author (GitHub)
Key Takeaways

The Circuit is a DOM

The "software is eating the world" trope has finally reached the copper traces of printed circuit board design. For decades, hardware engineering required specialized, monolithic CAD software. These tools are powerful but operate as black boxes. They rely on proprietary binary files, making version control and collaboration a nightmare.

Enter tscircuit. It is not just another layout tool. It is a fundamental shift in how we define physical electronics. By treating a circuit board as a Document Object Model, tscircuit allows a web developer to build a physical device using the exact same mental models they use for a landing page.

The magic happens in the Runframe. This self-contained, browser-based environment turns TypeScript into a 3D-renderable piece of hardware in real time. You change a resistance prop in your code editor, and the physical 3D model of the board updates instantly in the adjacent browser window.

Reconciliation for Copper

Under the hood, tscircuit leverages a custom React Fiber reconciler. Instead of rendering divs and spans to a browser window, it renders resistors, capacitors, and microchips into a standardized intermediate format called Circuit JSON.

This is a profound technical unlock. React's reconciliation algorithm is designed to efficiently calculate the difference between two states of a UI. The tscircuit team realized this same logic could solve physical trace routing and component placement. When a component's state changes, the reconciler determines the minimal set of physical updates required for the board layout.

A left-to-right flow showing the tscircuit compilation pipeline. It starts with a node "React Component (<resistor />)" which points to a central processor node "Layout Engine". The Layout Engine maps abstract logic down to "Circuit JSON". From Circuit JSON

The core pipeline processes the React tree into class instances. It then runs a multi-phase render pipeline that handles port matching, schematic layout, and physical PCB layout. The output is always Circuit JSON. This universal assembly language is then consumed by specialized viewers for schematics, 3D previews, and manufacturing exports.

Breaking the GUI Monolith

Traditional EDA tools like KiCad or Altium are heavily GUI-driven. You place components with a mouse and route traces by hand. The resulting save file is often a massive, unreadable blob. If two engineers try to edit the same board simultaneously, merging their changes is nearly impossible.

Because tscircuit is entirely code-based, it enables true Continuous Integration and Continuous Deployment for hardware. Teams can review pull requests for a circuit board just as they would for a web application. They can write unit tests to verify that a specific pin connects to ground before ever ordering a physical prototype.

Feature Traditional CAD (KiCad) tscircuit
Workflow GUI-first, manual routing Code-first, React components
Version Control Difficult (Binary/XML blobs) Native (Standard Git diffs)
Reusability Copy-paste schematic blocks NPM packages
Collaboration Single-user bottleneck Asynchronous Pull Requests

From Browser to Breadboard

A purely digital representation of a circuit is useless if it cannot be manufactured. The final piece of the tscircuit architecture is the bridge to physical reality. The system handles complex industrial standards effortlessly.

A mechanical arm placing a physical resistor into a digital code bracket.
tscircuit maps abstract component definitions directly to physical footprints and 3D models.

Developers define components using abstracted string descriptions like `sot236` or `0805`. The internal footprinter module automatically converts these strings into precise physical copper pad layouts. The platform natively imports 3D asset types like STEP and STL strings directly into the TypeScript environment.

When the design is complete, the compiler generates standard Gerber files. These are the exact files required by global fabrication facilities. You write React code, commit to Git, and a physical box of custom circuit boards arrives on your doorstep days later.


Sources: tscircuit Repository; circuit-json Specification.