@tscircuit/pcb-viewer


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

``bash
npm install @tscircuit/pcb-viewer
`

There are two main ways to use the PCBViewer:

$3

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

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

export default () => {
return (



)
}
`

$3

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

`tsx
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 (



)
}
`

$3

The PCBViewer component accepts these props:

- children: Circuit components to render
- circuitJson: Circuit JSON elements array (alternative to children)
- height: Height of viewer in pixels (default: 600)
- allowEditing: Enable/disable editing capabilities (default: true)
- editEvents: Array of edit events to apply
- onEditEventsChanged: Callback when edit events change
- initialState`: Initial state for the viewer

$3

- Interactive PCB viewing with pan and zoom
- Multiple layer support (top, bottom, inner layers)
- Component placement editing
- Trace routing
- DRC (Design Rule Check) visualization
- Measurement tools