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.
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!
- The framework treats physical circuit boards as a Document Object Model to enable hardware design using web development paradigms.
- A custom React Fiber reconciler translates component logic into physical layouts by calculating the difference between board states.
- Replacing GUI-heavy CAD tools with code allows developers to manage hardware designs through standard Git version control and pull requests.
- The compiler automatically converts TypeScript components into manufacturing-ready Gerber files and 3D models.
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.
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.
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.