1.11.68 • Published 3 months ago

@tscircuit/pcb-viewer v1.11.68

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

@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:

  • 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

Features

  • 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
@emotion/css@tscircuit/math-utilscircuit-json-to-connectivity-mapcircuit-to-svgcolorgraphics-debugreact-supergridreact-toastifytransformation-matrixzustand
@everything-registry/sub-chunk-938kicad-component-convertertscircuit@tscircuit/runframe
1.11.67

3 months ago

1.11.68

3 months ago

1.11.58

3 months ago

1.11.59

3 months ago

1.11.63

3 months ago

1.11.64

3 months ago

1.11.61

3 months ago

1.11.62

3 months ago

1.11.60

3 months ago

1.11.65

3 months ago

1.11.66

3 months ago

1.11.52

4 months ago

1.11.53

4 months ago

1.11.51

4 months ago

1.11.56

3 months ago

1.11.57

3 months ago

1.11.54

4 months ago

1.11.55

3 months ago

1.11.50

4 months ago

1.11.49

4 months ago

1.11.48

4 months ago

1.11.42

4 months ago

1.11.47

4 months ago

1.11.45

4 months ago

1.11.46

4 months ago

1.11.43

4 months ago

1.11.44

4 months ago

1.11.38

5 months ago

1.11.39

4 months ago

1.11.36

5 months ago

1.11.37

5 months ago

1.11.34

5 months ago

1.11.35

5 months ago

1.11.32

5 months ago

1.11.33

5 months ago

1.11.41

4 months ago

1.11.40

4 months ago

1.11.30

5 months ago

1.11.31

5 months ago

1.11.27

5 months ago

1.11.28

5 months ago

1.11.25

5 months ago

1.11.26

5 months ago

1.11.24

5 months ago

1.11.29

5 months ago

1.11.16

5 months ago

1.11.17

5 months ago

1.11.14

5 months ago

1.11.15

5 months ago

1.11.12

5 months ago

1.11.13

5 months ago

1.11.10

5 months ago

1.11.11

5 months ago

1.11.18

5 months ago

1.11.19

5 months ago

1.11.4

5 months ago

1.11.3

5 months ago

1.11.2

5 months ago

1.11.1

5 months ago

1.11.8

5 months ago

1.11.7

5 months ago

1.11.6

5 months ago

1.11.5

5 months ago

1.11.9

5 months ago

1.11.20

5 months ago

1.11.23

5 months ago

1.11.21

5 months ago

1.11.22

5 months ago

1.10.26

5 months ago

1.10.24

6 months ago

1.10.25

6 months ago

1.10.23

6 months ago

1.10.22

6 months ago

1.10.20

6 months ago

1.10.21

6 months ago

1.10.19

7 months ago

1.10.18

7 months ago

1.10.17

7 months ago

1.10.16

8 months ago

1.10.15

8 months ago

1.10.14

8 months ago

1.10.9

8 months ago

1.10.8

9 months ago

1.10.7

9 months ago

1.10.6

9 months ago

1.10.13

8 months ago

1.10.11

8 months ago

1.10.12

8 months ago

1.10.10

8 months ago

1.10.5

9 months ago

1.10.4

9 months ago

1.10.3

9 months ago

1.10.2

9 months ago

1.8.2

10 months ago

1.8.1

10 months ago

1.8.0

10 months ago

1.9.3

9 months ago

1.9.2

9 months ago

1.9.1

9 months ago

1.9.0

9 months ago

1.7.0

10 months ago

1.10.1

9 months ago

1.10.0

9 months ago

1.6.0

10 months ago

1.5.0

10 months ago

1.4.6

10 months ago

1.4.5

10 months ago

1.4.4

11 months ago

1.4.3

11 months ago

1.4.2

11 months ago

1.4.1

11 months ago

1.4.0

12 months ago

1.3.10

1 year ago

1.3.13

1 year ago

1.3.14

1 year ago

1.3.11

1 year ago

1.3.12

1 year ago

1.3.9

1 year ago

1.3.8

1 year ago

1.3.7

1 year ago

1.3.6

1 year ago

1.3.5

1 year ago

1.3.4

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.2.26

1 year ago

1.2.24

1 year ago

1.2.25

1 year ago

1.2.23

1 year ago

1.2.22

1 year ago

1.2.21

1 year ago

1.2.18

1 year ago

1.2.19

1 year ago

1.2.20

1 year ago

1.2.16

1 year ago

1.2.17

1 year ago

1.2.15

1 year ago

1.2.13

1 year ago

1.2.14

1 year ago

1.2.0

2 years ago

1.1.0

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.9

2 years ago

1.2.12

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago