# ⏣ tscircuit - React for Circuits
[Docs](https://docs.tscircuit.com) · [Website](https://tscircuit.com) · [Twitter](https://twitter.com) · [Campfire](https://tscircuit.com/community/join-redirect) · [Quickstart](https://docs.tscircuit.com/quickstart) · [Online Playground](https://tscircuit.com/playground)
[![NPM Version](https://img.shields.io/npm/v/tscircuit)](https://www.npmjs.com/package/tscircuit) [![](https://img.shields.io/github/stars/tscircuit/tscircuit)](https://github.com/tscircuit/tscircuit)
Make electronics using Typescript and React.
```
npm install -g tscircuit
```
`tscircuit` is a library complemented by a registry, package manager, and command line tool that makes it easy to create, share, export and manufacture electronic circuits. It uses
[React Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) to render circuits into web pages.
```tsx
const Circuit = () => (
.D0", ".R1 > .left"]} />
.right", ".GND > .gnd"]} />
)
```
![Example Circuit Rendering](./docs/example_render.png)
https://github.com/tscircuit/tscircuit/assets/1910070/63610730-41e6-4a00-9748-e4c3691e5ca9
## Getting Started
You can do everything you need to do with `tscircuit` using the [`tsci`](https://github.com/tscircuit/cli) command line tool.
```bash
npm install -g tscircuit
tsci dev
```
> Open your browser to http://localhost:3020!
> ![tsci Server Preview](./docs/example_preview.png)
## 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](https://tscircuit.com/trending) with `tsci add`
- [X] Publish subpackages to the registry with `tsci publish`
- [X] Simplified, extensible auto-routing for schematics and PCBs
---
## 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](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) use to render to mobile or 3d to render PCBs and schematics (it's called [React Fiber](https://github.com/acdlite/react-fiber-architecture)!)
You can render schematics or PCBs in any React project like this:
```tsx
import { Schematic } from "@tscircuit/schematic-viewer"
export const MyApp = () => (
Regular web react here!
)
```
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)
### Is this ready for production?
No! Although I've [ordered a fully assembled circuit](https://x.com/seveibar/status/1780803190101020720) [(source code)](https://github.com/tscircuit/blinking-led-circuit/blob/main/lib/MyCircuit.tsx), this project is still very very early!
### How does the registry work?
The tscircuit registry fully implements the npm registry. When you run `tsci init` a `.npmrc` file is created in your project so that any `npm add` or `npm install` for a package starting with `@tsci/*`
will go to the tscircuit registry instead of the npm registry.
```
# Example .npmrc
# This line says "any package from the org @tsci should use the tscircuit registry server
@tsci:registry=https://registry-api.tscircuit.com/npm
```
### Can I use a different registry?
Yes! You can use the same trick and modify the `.npmrc` file for your project. You can run your own npm registry with [verdaccio](https://verdaccio.org/)
### Why are some things upside down?
If you see something upside down, it's because mid-April the Y Axis was flipped so that "up" would mean the Y value would increase for both schematics and PCBs. In web development, the
Y axis is negative as you go up, but [this probably isn't a good choice an engineering tool](https://x.com/seveibar/status/1780992701800034726) so now the Y Axis is positive and some
things are upside down until they're fixed.
### Can I test this in my browser?
Yes! There is a [playground tool!](https://tscircuit.com/playground)
### Do I have to specify the position of every component?
I'm working on autolayout functionality where you will hopefully only need to
tweak things like the spacing. The goal of anything auto
### Is the auto-routing good?
The auto-routing is very basic. You can adjust the paths by adding `pcb_route_hints`
to a ``. Over time, we'll get good, fast auto-routing algorithms and also
ways to "bake & cache" a route over a longer time period.
### Can I export into other tools for routing?
This isn't currently possible but a major current objective. If you're interested in writing a module that can convert [tscircuit soup JSON](https://docs.tscircuit.com/api-reference/advanced/soup)
into another editor's format, reach out on our [campfire](https://tscircuit.com/community/join-redirect)!!
### I found a bug or have an idea for a feature, what should I do?
Please [create an issue](https://github.com/tscircuit/tscircuit/issues)!
### How can I follow along?
- [@seveibar](https://x.com/seveibar) is the main author, he tweets about tscircuit and does [development livestreams](https://www.twitch.tv/seveibar)
- [@tscircuit](https://x.com/tscircuit) for major tscircuit releases, features and discussions
- [tscircuit discord](https://discord.gg/6X3PYhtj) and [tscircuit campfire](https://tscircuit.com/community/join-redirect)
### Does this use AI?
No, but AI is pretty good at generating circuits! Try it with copilot!
### What big features are coming?
- [ ] Type-safe traces
- [ ] Lots of ways to use hooks to do more complex, safe circuits
- [ ] Autolayout and autorouter improvements
- [ ] Layout and route "baking" for more complex routes/layouts
- [ ] Lots and lots of static analysis
- [ ] SPICE output!
- [ ] Export to other EDA tools
- [ ] Less bugs! A lot less bugs!
---
## 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](https://github.com/tscircuit/tscircuit) | The main package, packages up everything into a single version |
| [@tscircuit/builder](https://github.com/tscircuit/builder) | A typescript-native library for building circuits (no React). Converts typescript into "the soup format" |
| [@tscircuit/cli](https://github.com/tscircuit/cli) | The tscircuit command line tool `tsci` and development environment |
| [@tscircuit/schematic-viewer](https://github.com/tscircuit/schematic-viewer) | The Schematic renderer |
| [@tscircuit/pcb-viewer](https://github.com/tscircuit/pcb-viewer) | The PCB renderer |
| [@tscircuit/react-fiber](https://github.com/tscircuit/react-fiber) | Bindings from builder to React, React types |
| [@tscircuit/routing](https://github.com/tscircuit/routing) | Routing algorithms for schematic and PCB traces |
| [@tscircuit/autolayout](https://github.com/tscircuit/autolayout) | Layout algorithms for schematics |
### Other Links
- [tscircuit.com](https://tscircuit.com) - The official tscircuit website
- [Registry](https://tscircuit.com/trending) - The official tscircuit registry that hosts re-usable tscircuit components
- [Community Campfire](https://tscircuit.com/community/join-redirect)
- [@seveibar](https://x.com/seveibar) - Twitter for author of tscircuit with dev sessions and upcoming features