logo elektroda
logo elektroda
X
logo elektroda

tscircuit - online PCB design in React/TypeScript, from code to hardware

p.kaczmarek2  3 132 Cool? (+1)
📢 Listen (AI):

TL;DR

  • tscircuit lets you design PCBs in React and TypeScript by writing circuit parts as JSX code instead of using classic CAD tools.
  • A simple project can fit in just 40 lines of code, and the project already supports live browser preview, 3D view, and Gerber export.
  • Web developers, electronics hobbyists, and PCB designers can use it because it connects familiar frontend coding with hardware design and makes circuit building more approachable.
  • Working with tscircuit can take you from code to a real board, since the author showed the full process of creating a board and ordering it from JLC.
  • Full ERC and DRC support is not included yet, so the platform is functional but not yet a complete replacement for traditional PCB design tools.
tscircuit editor with JSX code on the left and a 3D PCB preview on the right
An interesting project is gaining popularity on site X tscircuit , which combines frontend web technologies (React + TypeScript) with electronics design. The idea is simple: instead of classic CAD like KiCad or Altium, we write the circuit as JSX code. The electronic components are represented as React elements, such as a resistor or capacitor. The code is processed into a circuit structure (JSON) and then rendered and prepared for further stages. The project has modules for previewing the circuit directly in the browser, also in 3D form. All this is live, with no delays or charges. The current version is fully functional and allows you to create your own tiles, although it does not yet include full systems such as ERC and DRC. Export to Gerber format is supported, however, and the author has already demonstrated the full process of creating a tile including ordering it from JLC. For a simple project, you can fit in just 40 lines of code.

The project is available under the MIT licence and is 100% open source.


tscircuit can be tried for free online:
https://tscircuit.com/editor
Just paste in an example of tile code and you can then edit it live along with a 2D/3D preview:
Spoiler:

Code: Javascript
Log in, to see the code


A gallery of screenshots showing the results for the code posted above:
Screenshot of the tscircuit editor with JSX code on the left and a 3D PCB preview on the right.
Schematic of USB‑C connector J1 with VBUS, DP/DM, CC, SBU pins and an LED circuit with 1 kΩ to GND Browser-based PCB editor view with traces and components on a grid, top layer

Sources:

Project repository:
https://github.com/tscircuit/tscircuit

Do you see the potential of this approach to project development? Or has anyone already tested, tried to design a PCB this way?

About Author
p.kaczmarek2
p.kaczmarek2 wrote 14218 posts with rating 12104 , helped 647 times. Been with us since 2014 year.

Comments

p.kaczmarek2 25 Mar 2026 12:03

You're a bit right, but not entirely either - I remember, for example, that the formats from the old Eagle were pure XML, I even made a simple parser of its files myself at one time and it pretty much... [Read more]

gulson 25 Mar 2026 13:29

The project is seemingly old, 2 years old, but is only now gaining popularity and visibility thanks to better language models. Given how many variables, datasheets, differences in elements there are,... [Read more]

%}