`, you write circuit elements like `
`, ``, and ``.
Build reusable circuit components, share them on the [registry](https://tscircuit.com), and use the [`tsci` CLI](https://github.com/tscircuit/cli) to preview and [export your designs for manufacturing](https://docs.tscircuit.com/guides/understanding-fabrication-files).
### Circuit code
A simple voltage divider looks like this:
```tsx
export default () => (
)
```
Watch tscircuit in action
https://github.com/user-attachments/assets/91218278-2f00-48bf-97a2-53c7652c25e5
https://github.com/user-attachments/assets/e0fc9f05-691f-422e-816a-1854c4ffc02d
## 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!
Edit your circuit code and preview the schematic, PCB layout, and 3D model as you work.
## 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/) 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](https://text-to-footprint.tscircuit.com)
## 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)
### Can I test this in my browser?
Yes! There is a [playground tool!](https://tscircuit.com/editor)
### Do I have to specify the position of every component?
Currently you should specify `pcbX`/`pcbY` for components (and nest inside ``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](https://blog.autorouting.com)
### 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)
---
## 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/core](https://github.com/tscircuit/core) | A typescript-native library for building circuits (no React). Converts typescript into "the circuit-json format" |
| [@tscircuit/cli](https://github.com/tscircuit/cli) | The tscircuit command line tool `tsci` and development environment |
| [@tscircuit/tscircuit.com](https://github.com/tscircuit/tscircuit.com) | The main website, playground and online development environment for tscircuit |
| [@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 |
| [@tscircuit/footprinter](https://github.com/tscircuit/footprinter) | DSL for creating footprints |
| [kicad-mod-converter](https://github.com/tscircuit/kicad-mod-converter) | Convert kicad_mod files to and from JSON |
| [@tscircuit/kicad-viewer](https://github.com/tscircuit/kicad-viewer) | View the KiCad official footprints online |
## Other Links
- [tscircuit.com](https://tscircuit.com/) - The official tscircuit website, registry and playground
- [discord](https://tscircuit.com/community/join-redirect) - Join the community server where all the primary conversations happen
- [@seveibar](https://x.com/seveibar) - Twitter for author of tscircuit with dev sessions and upcoming features
