Tscircuit
Create real electronics with Typescript and React
Install / Use
/learn @tscircuit/TscircuitREADME
tscircuit - React for Circuits
Make electronics using Typescript, React, and AI tools.
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!
Get started by running npm install -g tscircuit! (CLI quickstart doc)
https://github.com/user-attachments/assets/e0fc9f05-691f-422e-816a-1854c4ffc02d
- What is tscircuit?
- Examples
- Getting Started
- Features
- FAQs
- Development Sub-Projects / Organization
- Other Links
What is tscircuit?
tscircuit is a library complemented by a registry, package manager, command line tool and AI electronic design suite that makes it easy to create, share, export and manufacture electronic circuits. It uses
React Fiber to render circuits into web pages.
Think of tscircuit as "React for Electronics" It allows you to design real-world electronic circuits using Typescript and React. This is what tscircuit code looks like, instead of creating web element like “div”, you create circuit elements like “chip”, “resistor” or “capacitor”, then instead of rendering a website, we render a 3d circuit (that you can actually order!)
Using tscircuit, you can design things like a <a target="_blank" href="https://blog.tscircuit.com/p/battling-jlcs-assembly-interface" target="_blank">fully functional keyboard!</a> Once you've completed your design, you can export it to a manufacturer and order a real, functional circuit board!
Example Circuits
const Circuit = () => (
<board width="50mm" height="50mm" center_x={0} center_y={0}>
<MySubcomponent name="U1" center={[0, 0]} footprint="sot236" />
<resistor
x={2}
y={-0.5}
name="R1"
resistance="10ohm"
footprint="0805"
pcb_x="4mm"
pcb_y="-1mm"
/>
<ground x={3} y={1} name="GND" />
<trace path={[".U1 > .D0", ".R1 > .left"]} />
<trace path={[".R1 > .right", ".GND > .gnd"]} />
</board>
)
Getting Started
You can do everything you need to do with tscircuit using the tsci command line tool.
npm install -g tscircuit
tsci dev
Open your browser to http://localhost:3020!
More Features!
- [x] Preview PCBs & Schematics in your browser
- [x] Use normal Typescript/React tooling
- [x] Export Gerbers, Pick'n'Place and BOM for manufacturing
- [x] Add registry packages with
tsci add - [x] Publish subpackages to the registry with
tsci push - [x] Simplified, extensible auto-routing for PCBs
- [x] Import footprints and components from third-party sites
- [x] Generate footprints from text using AI
FAQ
Is tscircuit free?
tscircuit is completely free and MIT-licensed open-source
How does this work?
tscircuit uses the same thing that React Native and react-three-fiber use to render to mobile or 3d to render PCBs and schematics (it's called React Fiber!)
You can render schematics or PCBs in any React project like this:
import { Schematic } from "@tscircuit/schematic-viewer"
export const MyApp = () => (
<div>Regular web react here!</div>
<Schematic>
<resistor name="R1" resistance="10k" />
</Schematic>
)
tscircuit has a bunch of extra tools and exports in the command line, so it's a bit easier to use tsci dev to develop circuits (you can always publish and import them later)
Can I test this in my browser?
Yes! There is a playground tool!
Do I have to specify the position of every component?
Currently you should specify pcbX/pcbY for components (and nest inside <group />s for convenience!)
We are working on building the equivalent of "flex" and "CSS Grid" autolayout algorithms for PCBs. Wherever an automatic placement is made, you'll be able to override it.
Is the auto-routing good?
We are working towards a state-of-the-art web-based autorouting algorithm. You can follow the progress of our autorouter development on autorouting.com
I found a bug or have an idea for a feature, what should I do?
Please create an issue!
How can I follow along?
- @seveibar is the main author, he tweets about tscircuit and does development livestreams
- @tscircuit for major tscircuit releases, features and discussions
- tscircuit discord and tscircuit campfire
Development Sub-Projects / Organization
tscircuit includes a lot of different independently-runnable sub-projects. Here's a quick guide to navigating all of the sub-projects:
Core Libraries
| Project | Description |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| tscircuit | The main package, packages up everything into a single version |
| @tscircuit/core | A typescript-native library for building circuits (no React). Converts typescript into "the circuit-json format" |
| @tscircuit/cli | The tscircuit command line tool tsci and development environment |
| @tscircuit/tscircuit.com | The main website, playground and online development environment for tscircuit |
| @tscircuit/schematic-viewer | The Schematic renderer |
| @tscircuit/pcb-viewer | The PCB renderer |
| @tscircuit/react-fiber | Bindings from builder to React, React types |
| @tscircuit/routing | Routing algorithms for schematic and PCB traces |
| @tscircuit/autolayout | Layout algorithms for schematics |
| @tscircuit/footprinter | DSL for creating footprints |
| kicad-mod-converter | Convert kicad_mod files to and from JSON |
| @tscircuit/kicad-viewer | View the KiCad official footprints online |
Other Links
- [tscircu
Related Skills
bluebubbles
333.3kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
node-connect
333.3kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
slack
333.3kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
82.0kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
