Quickstart
Create your first React Circuit in less than 5 minutes
Install tscircuit
Install tscircuit using npm
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
- Create a new directory for your circuit then navigate to it in your terminal
- Now run
tsci init
, this will bootstrap the directory into a usable project
Your bootstrapped project will look like this:
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.
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.
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!