logo elektroda
logo elektroda
X
logo elektroda
Advanced Search
logo elektroda
Give yourself a gift! »
Give yourself a gift! » Print 3D • Smart Home • Flipper
ADVERTISEMENT

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

p.kaczmarek2 585 6

TL;DR

  • tscircuit lets you design PCBs in React and TypeScript by writing circuits as JSX instead of using classic CAD tools like KiCad or Altium.
  • It converts React elements such as resistors and capacitors into a circuit structure in JSON, then renders the design with browser-based 2D and 3D previews.
  • A simple project reportedly fits in just 40 lines of code, and the editor is available free online at tscircuit.com/editor.
  • It supports Gerber export and the path from code to manufactured hardware, but full ERC and DRC are not included yet.
Generated by the language model.
ADVERTISEMENT
This content has been translated flag-pl » flag-en View the original version here
Report a violation of the law
Reply Cool? Ranking DIY | New topic
Notify about new articles
📢 Listen (AI):
  • 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?

    Cool? Ranking DIY
    Helpful post? Buy me a coffee.
    About Author
    p.kaczmarek2
    Moderator Smart Home  
    Offline 
    p.kaczmarek2 wrote 14316 posts with rating 12202, helped 648 times. Been with us since 2014 year.
  • ADVERTISEMENT
  • #2 21870150
    p.kaczmarek2
    Moderator Smart Home  
    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 worked, displayed elements, etc. in my own program without external libraries. XML is a text format, it is easy to parse, it would be worse for LLM if it was a binary format. I'll have to try one day out of curiosity to generate .sch and .brd files for Eagle in the biggest LLMs and see if they can create correct ones.
    Helpful post? Buy me a coffee.
  • ADVERTISEMENT
  • #3 21870226
    gulson
    System Administrator  
    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, we are still safe for the time being.
  • ADVERTISEMENT
  • #4 21870797
    Obywatel LutZek
    Level 13  
    I like how the person mentioned in the first post starts with "Electrical engineers are going to hate this", then attaches a video of an absurdly simple board :D . I feel like posts like this are electrifying to people who have never worked in hardware design. As are the people who develop such tools. Of course, automation of tasks will creep in at some point. But I suspect that once someone does it in an acceptable way, it will be the aforementioned Altium, which has the know how, the environment and a whole base of commercial projects in its cloud.
  • ADVERTISEMENT
  • #5 21870817
    gulson
    System Administrator  
    Exactly 'Electrical engineers are going to hate this', this is more to create outrage and boost views.
    That's how social media is these days, a battle for likes.
  • #6 21870921
    Citizen75
    Level 30  
    For the moment, it is rather a curiosity to show that it can be done. With extensive projects counting hundreds of paths, defining their parameters (design rules) for groups of paths or individual paths can be cumbersome.

    At the moment, we have a new version 10 of KiCad. There has also been a relatively new, free PCB design program for some time LibrePCB . Available for Windows, Linux, masOS and BSD.
Reply Cool? Ranking DIY | New topic
Notify about new articles
📢 Listen (AI):
Report a violation of the law
Today's popular

FAQ

TL;DR: In as little as 40 lines, tscircuit lets React and TypeScript users describe a PCB in JSX, and one forum view called it "a curiosity" more than a KiCad replacement. This FAQ helps developers and hardware hobbyists decide when code-first PCB design is useful, and when missing ERC/DRC still makes traditional CAD safer. [#21870091]

Why it matters: tscircuit shows a real path from web code to Gerber files, but the thread makes clear that browser speed alone does not replace mature PCB verification.

Tool Approach in the thread Strength noted Limitation noted
tscircuit React/TypeScript code, browser preview Live 2D/3D, Gerber export, free online No full ERC/DRC yet
KiCad 10 Traditional PCB CAD Mature alternative already available None stated in the thread
Altium Traditional commercial environment Know-how, ecosystem, cloud project base Implied higher barrier than a viral demo
LibrePCB Free PCB design program Available on Windows, Linux, macOS, BSD None stated in the thread

Key insight: tscircuit is most compelling as a fast, code-native workflow for simple boards and experimentation. The same thread still treats it as early-stage because serious projects need rule-checking and easier control of many traces. [#21870921]

Quick Facts

  • tscircuit is presented as 100% open source under the MIT licence, and the editor runs online with no stated charge or delay for trying examples live. [#21870091]
  • The sample board fits in 40 lines of code and includes a 12 mm × 30 mm board, one 1 kΩ resistor, one LED, a USB-C connector, and a pushbutton. [#21870091]
  • The JSX example assigns concrete layout values such as pcbY = -10.5, pcbY = 12, pcbY = 7, and pcbRotation = 90deg, showing that placement is encoded directly in source. [#21870091]
  • The thread dates the project at roughly 2 years old, while noting that its visibility rose only recently as language models improved. [#21870226]
  • KiCad is mentioned at version 10, and LibrePCB is identified as a free option for Windows, Linux, macOS, and BSD. [#21870921]

What is tscircuit, and how does it use React and TypeScript to design PCBs from code?

tscircuit is a code-first PCB tool that uses React and TypeScript to describe hardware as JSX elements. In the example, parts such as <resistor>, <led>, and <board> act like React components, then the code is processed into a circuit structure in JSON and rendered for later stages. The thread presents it as an alternative to classic CAD tools such as KiCad or Altium, especially for browser-based experimentation. [#21870091]

How do you create a simple PCB in tscircuit using JSX and preview it live in 2D and 3D in the browser?

You create a simple PCB by writing JSX, pasting it into the online editor, and editing it live. 1. Define a <board> such as 12 mm × 30 mm. 2. Add parts like a USB-C connector, LED, pushbutton, and 1 kΩ resistor with positions such as pcbY={12}. 3. Add traces, then view the result in live 2D and 3D previews in the browser. The thread says the shown example fits in about 40 lines. [#21870091]

What potential does the code-based tscircuit approach have for PCB development, and what has user experience with designing boards this way been like so far?

The approach has clear potential for fast prototyping, web-native workflows, and LLM-friendly hardware generation. The thread highlights live browser previews, Gerber export, and a full example that reportedly reached board ordering through JLCPCB. User reactions remain cautious, though. One view says it is currently more a curiosity than a practical replacement, especially for larger layouts. Another notes the project is about 2 years old and is only now gaining visibility. [#21870226]

Why are missing ERC and DRC features such a big limitation in a PCB tool like tscircuit?

Missing ERC and DRC are a major limitation because they remove core design checks from the workflow. The opening post says tscircuit is functional but still lacks full systems such as ERC and DRC, while another reply warns that projects with hundreds of traces already make parameter control cumbersome. Without those checks, fast code entry and browser previews do not guarantee that a board is safe or easy to manufacture. [#21870921]

What is ERC in PCB design software, and how is it different from DRC?

"ERC is a PCB-design validation check that tests electrical correctness at the circuit level, while DRC is a layout-rule check that enforces physical routing and geometry constraints." In this thread, the difference matters because tscircuit is said to lack full ERC and DRC systems, and a later post specifically points to the burden of defining trace parameters and design rules in larger projects. [#21870921]

How does Gerber export work in tscircuit, and what files do you need to send a board to manufacturing?

The thread says tscircuit supports Gerber export and that its author demonstrated the full flow through to ordering a board from JLC. In practice, the important point here is that the design can leave the browser editor as manufacturing output, not just as a visual demo. The discussion does not list individual file names, but it clearly treats Gerber export as the handoff step for fabrication. [#21870091]

In what ways does tscircuit compare with KiCad, Altium, and LibrePCB for real-world PCB projects?

tscircuit differs by making PCB design code-first and browser-based, while KiCad, Altium, and LibrePCB appear in the thread as more conventional PCB environments. KiCad is already at version 10. LibrePCB is free and available on Windows, Linux, macOS, and BSD. One poster argues that if acceptable automation arrives, Altium is well placed because it already has know-how, an environment, and a commercial cloud project base. [#21870921]

Why do some engineers see React-based PCB design as a curiosity rather than a practical replacement for traditional CAD tools?

Some engineers see it as a curiosity because the public demos show very simple boards, not the hard parts of professional hardware design. One reply jokes that the viral framing starts with “Electrical engineers are going to hate this” and then shows an absurdly simple board. Another says it is presently more proof that this can be done than a complete production workflow. That reaction comes directly from the gap between a slick demo and serious CAD needs. [#21870797]

When does defining traces and design rules in code become cumbersome compared with using a graphical PCB editor?

It becomes cumbersome once a design has many routes and each group needs separate constraints. The thread gives the concrete threshold as projects with hundreds of traces, where defining parameters or design rules for groups or individual traces can become awkward in code. That is the point where a graphical editor usually feels faster for inspection and bulk changes, even if the code-first method works for smaller boards. [#21870921]

How would you go from a tscircuit design to ordering a manufactured PCB from JLCPCB?

You would move from code to manufacturing in three stages. 1. Write the board in JSX and verify it in the browser with the live preview. 2. Export the design to Gerber, which the thread says tscircuit supports. 3. Upload those fabrication outputs to JLCPCB, a path the post says the author already demonstrated from design through ordering. The sample shown uses JLC component codes directly in the source, which helps connect design and assembly choices. [#21870091]

What is JSX in the context of electronics design, and how are components like resistors, LEDs, and USB-C connectors represented in it?

"JSX is a code syntax for describing interface-like structures, and here it represents PCB parts as nested elements with electrical and placement properties." In the sample, a resistor, LED, pushbutton, and USB-C connector appear as tags with values such as footprint="0603", resistance="1k", and pcbRotation="90deg". That makes the board readable as source code instead of a binary project file or purely graphical sketch. [#21870091]

How are supplier part numbers such as JLCPCB component codes handled in tscircuit projects?

tscircuit handles supplier codes as explicit fields inside the part definition. In the sample, the LED and pushbutton include supplierPartNumbers with JLCPCB codes such as 965799 and C110153. That means sourcing data sits next to the footprint, name, and electrical connections in the same JSX component. For small projects, that keeps design intent and procurement intent in one place. [#21870091]

What challenges do language models face when generating PCB design files or hardware projects from text descriptions and datasheets?

Language models struggle because hardware projects combine many variables, datasheets, and part-to-part differences. One poster says that, given the number of variables and datasheet details involved, engineers are still safe for the time being. Another point in the thread is that text-based formats are easier for an LLM than binary ones, but easier parsing still does not solve the engineering complexity behind a correct board. [#21870226]

How practical is generating Eagle .sch and .brd files with an LLM if the file formats are text-based XML?

It is more practical than generating binary CAD files, but the thread still treats it as an open experiment. A reply notes that old Eagle formats were pure XML, which made them easy to parse, and even mentions building a simple parser that displayed elements without external libraries. The same post stops short of claiming success with LLM generation and says the author still needs to test whether large models can produce correct .sch and .brd files. [#21870150]

Which free PCB design program is easier to start with today for hobby and small commercial projects: KiCad, LibrePCB, or tscircuit?

KiCad or LibrePCB look easier to start with today if you want a conventional PCB workflow. The thread explicitly mentions KiCad 10 and calls LibrePCB a free program available on Windows, Linux, macOS, and BSD. tscircuit is free to try online and is excellent for experimentation, but the same discussion says it still lacks full ERC/DRC and feels more like a curiosity for now than a complete replacement. [#21870921]
Generated by the language model.
ADVERTISEMENT