Home

Awesome

@tscircuit/pcb-viewer

npm version

Examples · TSCircuit · Open in CodeSandbox

Render Printed Circuit Boards w/ React

If you want to render to an image, check out circuit-to-png

image

Usage

npm install @tscircuit/pcb-viewer

There are two main ways to use the PCBViewer:

1. Using Circuit Components

This approach allows you to declaratively define your circuit using React components:

import React from "react"
import { PCBViewer } from "@tscircuit/pcb-viewer"

export default () => {
  return (
    <div style={{ backgroundColor: "black" }}>
      <PCBViewer>
        <resistor footprint="0805" resistance="10k" />
        <capacitor footprint="0603" capacitance="100nF" />
      </PCBViewer>
    </div>
  )
}

2. Using Circuit JSON

If you already have circuit JSON data, you can pass it directly:

import React from "react"
import { PCBViewer } from "@tscircuit/pcb-viewer"

const circuitJson = [
  {
    type: "pcb_component",
    pcb_component_id: "R1",
    center: { x: 0, y: 0 },
    // ... other component properties
  },
  // ... more elements
]

export default () => {
  return (
    <div style={{ backgroundColor: "black" }}>
      <PCBViewer circuitJson={circuitJson} />
    </div>
  )
}

Props

The PCBViewer component accepts these props:

Features