Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tscircuit/tscircuit
⏣ React for Circuits
https://github.com/tscircuit/tscircuit
cad eda electronics engineering hacktoberfest kicad react typescript
Last synced: 2 days ago
JSON representation
⏣ React for Circuits
- Host: GitHub
- URL: https://github.com/tscircuit/tscircuit
- Owner: tscircuit
- License: mit
- Created: 2024-03-14T21:00:44.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-19T06:09:10.000Z (2 days ago)
- Last Synced: 2025-02-19T07:22:44.322Z (2 days ago)
- Topics: cad, eda, electronics, engineering, hacktoberfest, kicad, react, typescript
- Language: TypeScript
- Homepage: https://tscircuit.com
- Size: 2.82 MB
- Stars: 599
- Watchers: 5
- Forks: 24
- Open Issues: 111
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⏣ tscircuit - React for Circuits
Make electronics using Typescript, React, and
AI.
We recommend starting with our online editor on tscircuit.com (no sign-up required) rather than our CLI. Learn more »
Discord
·
Website
·
Docs
·
Articles
·
Online Playground
·
Quick Start
·
Issues
·
Twitter
·
Open Bounties
https://github.com/tscircuit/tscircuit/assets/1910070/63610730-41e6-4a00-9748-e4c3691e5ca9
1. [What is tscircuit?](#about-tscircuit)
2. [Examples](#example-circuits)
3. [Getting Started](#getting-started)
4. [Features](#more-features)
5. [FAQs](#faq)
6. [Development Sub-Projects / Organization](#development-sub-projects--organization)
7. [Other Links](#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](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) 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 fully functional keyboard! Once you've completed your design, you can export it to a manufacturer and order a real, functional circuit board!
## Example Circuits
- [ESP32 Wifi Breakout Board](https://tscircuit.com/seveibar/wifi-test-board-1)
```tsx
const Circuit = () => (
.D0", ".R1 > .left"]} />
.right", ".GND > .gnd"]} />
)
```
## 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!
> 
## 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
- [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)
### 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/)
### 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
- [ ] 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/snippets](https://github.com/tscircuit/snippets) | 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