​
Install tscircuit

Install tscircuit using npm

npm install -g tscircuit tsx

You will now have the tsci command available. Try running tsci --help to see some of what’s available! We’ve also installed the typescript runner tsx

​
Initializing a Circuit

  1. Create a new directory for your circuit then navigate to it in your terminal
  2. Now run tsci init, this will bootstrap the directory into a usable project

Your bootstrapped project will look like this:

├── README.md
├── examples
│   └── MyExample.tsx
├── index.ts
├── lib
│   └── MyCircuit.tsx
├── node_modules
├── package.json
└── tsconfig.json

The most important files are MyCircuit.tsx and MyExample.tsx.

In tscircuit, every file in the examples directory is accessible from your preview window and will be shown on the registry. You can add variations of your circuit to MyExample.tsx add other files in the examples directory and they will be shown in the preview window.

In the lib directory, the MyCircuit.tsx file defines a boilerplate circuit. You can rename and modify this file to test out different circuits.

export const MyCircuit = () => (
  <resistor
    resistance="10kohm"
    name="R1"
    footprint="0805"
  />
)

​
Developing with Realtime Preview

To start the development server, run tsci dev in your terminal. This will open a new browser window at localhost:3020 with a Schematic and PCB preview of a circuit in your examples directory.

Initial Preview Window

​
Editing in VS Code

VS Code has Typescript and React support out of the box, and the tsconfig.json file is set up to load types from tscircuit, so there’s nothing to configure!

​
Build something!

Now that you know the basics, you can get started building circuits!

Tutorial: Blinking LED Circuit

Learn to install packages, build and schematic and auto-route a PCB, and publish circuits.

Playground

Use tscircuit in your browser

Registry