tscircuit.com

Build electronics with React. The website for tscircuit packages and the online tscircuit editor

Docs · Website · Twitter · discord · Quickstart · Online Playground

tscircuit.com is a web application for creating, sharing, and managing circuit designs using TypeScript and React. It provides an intuitive interface for designing circuit boards, packages, footprints, and 3D models.

Features

• Create and edit circuit designs using TypeScript and React
• Real-time preview of PCB layouts and 3D models
• Share and collaborate on circuit designs
• AI-assisted circuit design and error correction
• Import and export designs in various formats

Getting Started

Prerequisites

• Bun (latest version)

Installation

1. Clone the repository:

git clone https://github.com/tscircuit/tscircuit.com.git
cd tscircuit.com

2. Install dependencies:

bun install

Running the Development Server

To start the development server:

bun run dev

This command will build the fake API and start the Vite development server. Open http://localhost:5173 in your browser to view the application.

Testing the AI in Development

Create a .env file with the following:

VITE_USE_DIRECT_AI_REQUESTS=true
VITE_ANTHROPIC_API_KEY=<your-key-here>

Error Reporting

To enable Sentry error monitoring, set the SENTRY_DSN environment variable before running the app. The value will be exposed to the client as VITE_SENTRY_DSN and used to initialize Sentry.

Building for Production

To build the project for production:

bun run build

This will create a production-ready build in the dist directory.

Project Structure

• src/: Contains the main React application code
• fake-snippets-api/: Contains the mock API for development
• public/: Static assets
• src/components/: Reusable React components
• src/hooks/: Custom React hooks
• src/pages/: Main page components
• src/lib/: Utility functions and helpers
• playwright-tests/: Playwright test files
• playwright-tests/snapshots/: Visual regression test snapshots

Snapshots

We use Playwright for visual regression testing. Snapshots are stored in the playwright-tests/snapshots/ directory.

To update a single snapshot run...

bun run snapshot

This will prompt you to select a specific test file to update.

Contributing

We welcome contributions to TSCircuit Snippets! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

Example Snippets

• Arduino Nano Servo Breakout Board

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by val.town, codesandbox.io, and v0.dev
• Built with React, Vite, and Tailwind CSS

For more information, visit tscircuit.com.