Importing Modules and Chips
Running tscircuit
- Building a Static Site:
tsci build --sitepackages your tscircuit project into a static website that anyone can browse without running a server. - Connect GitHub Repositories to tscircuit: You can connect your GitHub repositories to tscircuit to automatically
- Displaying Circuit JSON on a Webpage: Circuit JSON is a universal
- Platform Configuration: The Platform Configuration allows you to change tscircuit behavior to best suit the platform the tscircuit code is running on.
- Programmatically Building Circuits: This guide is about using tscircuit inside of scripts, APIs or inside the browser. Maybe you want to create a website that allows your users drag'n'drop to create custom electronics and turn their designs into real circuits automatically.
- Running tscircuit inside an iframe: tscircuit can be evaluated inside an iframe. This makes it easy to embed snippets on a webpage without complex build systems.
- Running tscircuit with a script tag: Load
tscircuit's browser build from a CDN and render a circuit written inside a<script type="tscircuit-tsx">block – no build tooling required. - Using tscircuit without React: {/* tscircuit uses React by default for strong guarantees about how
Circuit Generation
TypeScript Guide
- Using React Context to Avoid Prop-Drilling: React Context is a powerful tool for sharing data across deeply nested components without having to pass props through every level of the tree. When building TypeScript-powered circuit design tools, context lets you centralize configuration and provide well-typed data to any component that needs it.
- Using TypeScript Path Aliases: TypeScript path aliases allow you to create shorthand references to directories in your project, making imports cleaner and more maintainable. Instead of using relative paths like ../../components/resistor, you can use aliases like @components/resistor.
tscircuit Essentials
- Essential Elements: There are some essential elements you'll need for almost every circuit you make, this doc gives a brief overview of each of them so you can jump right in and get started building electronics!
- Configuring Chips: Walk through configuring
<chip />components, from defining pin labels and footprints to wiring reusable chip abstractions. - Automatic PCB Layout: Explore tscircuit's automatic PCB layout engines: pcbFlex, pcbGrid, and pcbPack, and learn how to choose the right approach for arranging components quickly.
- Automatic Schematic Layout: Understand how the default schematic autolayout arranges components and discover options for nudging results with manual edits and layout helpers.
- Using Layout Properties: There are many ways to layout your schematic and PCB with tscircuit including automatic layout and manual edits. In this article we'll discuss how to programmatically lay out a board using layout properties like
schX/schYandpcbXandpcbY - Manual Edits: Learn how to capture drag-and-drop adjustments in
manual-edits.json, use the schematic and PCB editors to create them, and troubleshoot when changes don't apply. - Pinout SVG: Generate shareable pinout diagrams by annotating components with
pinAttributesand exporting the interactive SVG view. - Port and Net Selectors: Learn how to target ports, nets, and components with selector strings, and see practical examples for traces and component props.
- tscircuit.config.json: Configure your tscircuit project settings
- Using Expressions for Component Values: Use JavaScript expressions inside circuits to derive component values that react to other parameters, like voltage dividers or tuned filters.
- Using Groups for PCB Layout: Groups can help you break up your layout problem into smaller, more manageable and reusable parts.
- Using "sel" References: Reference components, pins, and modules with the type-safe
selhelper and learn when to use conventional selectors or component-aware lookups.
Understanding Fabrication Files
Fabrication files are files that can be uploaded to a fabricator or turn-key manufacturer to get an entire circuit board made. tscircuit includes three main types of files inside our fabrication files zip: