Getting Started with tscircuit

Quickstarts, installation, and core concepts for new users

Overview

tscircuit is a TypeScript-first PCB design platform that lets you design circuit boards using React-like syntax. This skill covers the fundamentals you need to start designing boards.

Quick Navigation

What is tscircuit?

tscircuit allows you to design printed circuit boards (PCBs) using TypeScript and React. Key features:

• •Declarative PCB Design: Describe your board like HTML
• •Type-Safe: Full TypeScript support with autocomplete
• •Auto-Routing: Automatic trace routing
• •Component Library: Pre-built components and footprints
• •Cloud Integration: Publish and share designs

Key Concepts

1. •Board: The root element containing all components
2. •Components: Resistors, capacitors, chips, etc.
3. •Footprints: Physical pad layouts for components
4. •Traces: Copper connections between components
5. •Nets: Logical connections (VCC, GND, etc.)

Installation

Prerequisites

• •Node.js 18+ or Bun
• •TypeScript knowledge
• •A text editor (VS Code recommended)

Quick Install

# Using bun (recommended)
bun install tscircuit

# Using npm
npm install tscircuit

# Initialize a new project
tsci init

Project Structure

my-circuit/
├── index.tsx          # Main circuit file
├── package.json
├── tsconfig.json
└── tscircuit.config.json

Your First Board

import React from "react"
import { board, resistor, capacitor, trace } from "tscircuit"

export default () => (
  <board width="10mm" height="10mm">
    <resistor resistance="1k" footprint="0402" name="R1" />
    <capacitor capacitance="100nF" footprint="0402" name="C1" />
    <trace from=".R1 > .pin1" to=".C1 > .pin1" />
  </board>
)

Related Skills

Next Steps

1. •Follow the web quickstart for browser-based design
2. •Try the CLI workflow for local development
3. •Explore components to learn available elements