Skip to main content

What is tscircuit?

tscircuit is an open-source React/Typescript electronics toolchain and ecosystem for creating, previewing, simulating and manufacturing Printed Circuit Boards (PCBs).

React and Typescript are standard tools that revolutionized the web development ecosystem. tscircuit combines the powerful static analysis of Typescript with the modular component system of React to make developing electronics faster, easier and more automated.

Here's an example of a basic tscircuit electronic device, it's the USB flashlight that we make in this tutorial.

import { usePushButton } from "@tsci/seveibar.push-button"
import { useUsbC } from "@tsci/seveibar.smd-usb-c"

export default () => {
const USBCPort = useUsbC("USBC")
const Button = usePushButton("SW1")
return (
  <board width="12mm" height="30mm">
    <USBCPort
      GND1="net.GND"
      GND2="net.GND"
      VBUS1="net.VBUS"
      VBUS2="net.VBUS"
      pcbY={-10}
      schX={-4}
    />
    <led name="LED" color="red" footprint="0603" pcbY={12} schY={2} />
    <Button pcbY={0} pin2=".R1 > .pos" pin3="net.VBUS" schY={-2} />
    <resistor name="R1" footprint="0603" resistance="1k" pcbY={7} />
    <trace from=".R1 .neg" to=".LED .pos" />
    <trace from=".LED .neg" to="net.GND" />
  </board>
)
}
3D Circuit Preview

This small snippet of code helps demonstrate the power of tscircuit. From those 40 lines, we were able to create a full PCB, Schematic and 3D preview. Not only that, but we can export this circuit to Fabrication Files and get it fabricated and assembled. In fact we did!

USB Flashlight PCB After Manufacturing

It may not seem like much, but tscircuit just handled a lot of work for us!

  • Automatic Part Selection and Bill of Materials Generation
  • Autorouting
  • Schematic and PCB Layout
  • 3D Model Generation
  • Fabrication File Generation

...and it ran completely in our browser!

tscircuit isn't limited to simple circuits like this. You can keep adding elements, creating modules and combining them to create more and more complex circuits. Here's an example of a simple 3x3 macrokeypad based on the PICO2!

import NineKeyKeyboard from "@tsci/seveibar.nine-key-keyboard"

export default () => <NineKeyKeyboard />
PCB Circuit Preview

We ordered this one too!

3x3 Macrokeypad

Depending on your experience level with electronics, you may want to get started with any of the following resources: