Show HN: React for Circuits

[seveibar]

Hi HN! I've been working on a new way to build electronics/PCBs with Typescript/React, I'd love to know what you think!!

I've wanted to program circuits for a long time- I started experimenting with the concept of creating circuits in React almost 8 years ago and have spent many weekends since to prove the concept. Over the past 2 months, I've decided to start working on tscircuit full-time.

[looneysquash]

Looks pretty cool.

I'm not sure I'd really want to design an electronics project in jsx though. That's just xml, but also JavaScript. And I guess I think of it more as data than as code.

I was thinking a simple language would be nice, something alternative to a GUI and mouse.

But I was thinking more along the lines of LT Spice's netlist. Or plantuml. Or markdown

Also, I was thinking of html and css. But not so much the syntax as the separation of structure and styling.

You could even have two "stylesheets", one for the schematic and one for the board

[seveibar]

Really appreciate the insights!! I think JSX/TSX are a lot more powerful than most data representations because 1) you can modularize and import sub-circuits really easily and with an effective known pattern (the npm registry installation pattern) 2) you can compute pretty complicated data from relatively simple React components, e.g. <DualInlinePackage pad_count={6} /> produces 6 pads with standard spacing. I also think it's really powerful you can add type validation (e.g. any odd number is invalid for pad_count). I'm counting on smart people creating awesome patterns/higher-level-components just like they did with React for web!

[kennywinker]

You might be interested in atopile or pcbdl - they’re much more like what you’re describing

https://atopile.io/

https://google.github.io/pcbdl/doc/_build/html/readme.html

[philsnow]

> And I guess I think of it more as data than as code.

What about OpenSCAD? I haven't looked into tscircuit very much and I barely remember any of the vhdl I did in college, and maybe it's more useful/relevant to make parameterized 2d/3d shapes rather than parameterized circuit components, but I have always been more comfortable with typey-compiley rather than pointy-clicky.

[Flux159]

Nice, it's an interesting concept and always like exploring new ways of using react in other contexts (react-three-fiber being easy to use for simple 3d projects, I have also written an Unreal Engine reconciler prototype earlier built on an Unreal JS plugin, but decided not to pursue it further).

Do you see the future of this project being something like a library of tscircuit components that you can compose together writing code rather than having to use Eagle or other pcb design software? Or I guess somehow autogenerating tscircuit components based on specsheets?

Looking at the code, I see that there's a reconciler here https://github.com/tscircuit/react-fiber/blob/main/src/lib/r..., but that seems to just be a thin wrapper to https://github.com/tscircuit/builder which is doing the heavy lifting of getting to a serializable format. One thing I'm wondering is why is there a need for separate repos since I feel like the tsx portion, reconciler, and builder are kinda needed together?

[seveibar]

That's awesome to hear!! React Fiber is super cool and I love to see new stuff on it!

Yes I see the registry/central library being kind of like npm with a lot of React/tscircuit components that can be dropped into or used as a foundation for large designs, think <Arduino />, <MotorController /> or <Atmega /> etc. I also hope to make part substitution super easy, so equivalent subcircuits can be swapped based on part availability.

Separating into multiple repos makes some things really difficult but creates some nice boundaries. React Fiber is something that a lot of people don't understand (it's also not really officially documented as you may know!) so I wanted to separate it from "pure typescript" and the builder pattern which I think is a bit easier to grok if you're just fixing a bug etc. The codebases are a mess and I'm very eager to do some basic project hygiene- a lot of cruft accumulates over years of weekend development haha.

Thanks a ton for checking it out!!

[vbezhenar]

I tried to use JSX syntax to generate PDF files. In the end I didn't go this way, but it was interesting idea, worth exploring.

[UberKryos]

Hi, this looks sorta interesting, I was wondering if you would have plans to be able to go from schematic or layout back to the jsx, so people familiar with the more traditional tools would be able to port stuff to this ecosystem? Also I would love to see something like being able to length and/or impedance match traces as well as input pcb design rules and net constraints. Will there be an easy way to represent gnd and pwr planes/polygon pours?

[seveibar]

There will absolutely be stuff like ground pours (probably via a <pour /> component) and the ability to create user-specified constraints and static analysis.

Going from schematic back to JSX is a major goal, I'm building an LLM that can do this as well as read datasheets- this is in part to bootstrap the registry with components that come pre-loaded with the recommended decoupling capacitors.

[imtringued]

This is only useful for the code generated parts of a design. For most basic circuits the freerouting autorouter already works well enough. The real challenge isn't laying out a PCB. It is simulating and checking that it works before production. The proprietary tools can do that. Board houses often inspect your work using proprietary software. What is needed is an open source equivalent that packages the existing solvers in an easy to use UI.

[seveibar]

I totally agree that static analysis is critical and that's going to be a major effort. I see tscircuit as a great foundation for open-source static analysis as well as GUI tools to be built on (otherwise, it's kind of hard to render circuits to the web!)

I'm introducing "trace baking" soon that will let you use stuff like the freerouting autorouter (or other autorouters) asynchronously, e.g. you just surround your circuit with <autoroute router="freerouting" cache_id="..."> and it'll use a remote or local server to handle autorouting.

[CodeMaven]

This is a fascinating approach, and I'm always keen to discover new applications for React, like simple 3D projects with react-three-fiber. I've also experimented with an Unreal Engine reconciler using a JavaScript plugin but didn't continue with it.

[tmitchel2]

Awesome work, I've developed my own projects which are fairly similar to this. I would say that the auto router is the most important aspect for this to work well, and unfortunately one of the most complex areas :)

The only minor complaint is that the wires / nets / traces are also components themselves. JSX can only build tree structures but wires turn circuits into graphs, so for those I would have used plain js classes or hooks like useWire and then pass the + and - into the components. That gives you the added benefit of warning when you haven't wired up a component fully. Also allows for required and optional wire inputs on components.

[seveibar]

useWire and other type-safe routing features are coming soon! You are 100% correct that the way it’s currently being done can’t leverage the type system. I also agree that autorouting and auto-layout are critical (in the same way flex is important for web!!)

[gedy]

Very nice work, thank you. This is a nice intersection of my tech interests, both React and I like to make custom keyboards. I've never liked using the drag and drop design tools for circuits, so I'm keen to try this.

[seveibar]

Let me know how it goes! I would love talking to people working with it, so if you'd like drop me a line!! seve at tscircuit dot com

It's wayy easier to collaborate in tscircuit, people can make submodules for eachother! So I could even just take your BOM and try to put something on the registry to make it easier to build out your first design :) good luck!

[WaxProlix]

I initially laughed, but this is very cool actually. I love the pluggable/reusable 'component' registry idea.

Kudos, I'll check it out this weekend (or next... :)

[seveibar]

Cheers! Yes the reusability is really why React blew my mind years ago, unlike other frameworks at the time, React could really just be "dropped in"

[shepherdjerred]

Could I use this to create a board that hooks up a ESP32/Raspberry Pi to some LEDs/switches/potentiometers?

I've got a breadboard concept but I have no idea how to polish it up. All of the software GUIs look so intimidating, but I'm very familiar with TS/React!

[seveibar]

It’s a bit buggy right now but you should absolutely be able to do a simple project like that! I’m happy to help, my email and a community chat are on tscircuit.com If you haven’t built PCBs before it can be a bit tough, but it’s worth it for how many potential boards you can build!!

[meta-level]

Could this approach also be used to script a Factorio blueprint?

[seveibar]

You can build anything with a React Fiber layer, people have compiled things to mobile, 3d, VR, equations etc. Unironically I think that's a great project :)

[franky47]

This is really cool. I've been doing a lot of EE and PCB design back in the day with Eagle, nice to see this kind of tech landing in the browser. Great job!

[nixpulvis]

Would be really cool if you could omit the x, y coordinates and it would place a reasonable layout for the schematics and footprints.

[seveibar]

Actively working on this! It will take some time to get right but I agree it’s a critical feature https://x.com/seveibar/status/1783672107702030778?s=46

[iyifr]

Why react ??

[throwaway11460]

Reusable parametrized components and state updates (for designer tool) for free.

Also could be used to build an interactive simulator pretty easily.

[cjk2]

Not wishing to kill the idea, but this looks much harder rather than easier to lay out boards. Also the outcome is not what I'd call even remotely normal for a board design.

I mean it's a good experiment and learning exercise but I don't see a practical case for it.

[frognumber]

To me, it seems useless in the current state, but it seems potentially very useful long-term.

The core thing code allows is code, constraints, and subcomponents. I can see writing:

<oscillator555 frequency="10kHz">

And having this have a premade parametrized component with layout, as well as knowing about things like power supplies.

I can also see this integrating more with GUI tools.

There are many steps going forward, not specific to this, which would need to be in place, such as:

- Allowing React XML without JSX (e.g. in data files)

- Exporting to the above

- CSS-style templates and state management

... and similar. Those would potentially permit both code-based tools and GUI tools to interact meaningfully, and that's where the real power would come in.

You get there with prototypes like this one, and increments.

Ideally, where this would end up is almost:

<EPSHome> <ESP8266/> <Sensor/> <Sensor/> <Sensor/> </ESPHome>

And a crude-but-working layout comes out, which gets made for $10, populated with ESPHome, and monitors whatever I want to monitor at home. Not much more than STEMMA, but with a nice PCB instead of a dozen cables .

[junon]

In your video you mention that with 50 dollars you could have that board shipped to you, but my brother in christ if you are paying anywhere near 50 for that board you are being scammed :D

[amelius]

Fwiw, I often pay $5 for a board, and $40-$50 for shipping from China.