Skip to main content

<board />

The <board /> element is a root element that contains all the chips and traces to create a PCB.

You can think of a <board /> like a <body /> element in HTML. Everything goes in a board!

export default () => (
  <board width="10mm" height="10mm">
    <resistor resistance="1k" footprint="0402" name="R1" />
  </board>
)
PCB Circuit Preview

Board Properties​

Customizing the Size of the Board​

Generally you'll use the width and height properties to define the size of the board.

Setting the autorouter​

Boards or subcircuits can specify what autorouter should be used to route any traces within them.

Usually you'll want to use an autorouter preset:

  • autorouter="auto" - Uses the platform configuration. For tscircuit.com this defaults to sequential-trace.
  • autorouter="sequential-trace" - Iterate over each trace and use tscircuit's fast built-in autorouter. This method is fast and deterministic but often fails with over 50 traces.
  • autorouter="auto-local" - Use the platform configuration, but only route locally (do not make API calls)
  • autorouter="auto-cloud" - Use the platform configuration for

For complex boards with over 50 traces, you should use autorouter="auto-cloud" to take advantage of tscircuit's cloud autorouters, which internally use the popular freerouting library.

You can also specify a custom autorouter object to use your own autorouter.

export default () => (
  <board
    width="20mm"
    height="20mm"
    autorouter={{
      serverUrl: "https://registry-api.tscircuit.com",
      serverMode: "job",
      inputFormat: "simplified",
    }}
  >
    <chip name="U1" footprint="soic8" pcbX={5} pcbY={0} />
    <resistor
      name="R1"
      pcbX={-5}
      pcbY={0}
      resistance={100}
      footprint="0402"
    />
    <trace from=".U1 > .pin1" to=".R1 > .pin1" />
  </board>
)
PCB Circuit Preview

Learn more about the Autorouting API here

Custom Board Outlines​

You can specify a custom outline for your board by passing an outline prop. The PCB you get will have this outline cut out, this is great when you want a board that's not a rectangle!

export default () => (
<board
  outline={[
    { x: -22.5, y: 24.5 },
    { x: 22.5, y: 24.5 },
    { x: 22.5, y: 16.5 },
    { x: 20.5, y: 16.5 },
    { x: 20.5, y: 12.5 },
    { x: 22.5, y: 12.5 },
    { x: 22.5, y: 2.5 },
    { x: 18, y: -1.5 },
    { x: 18, y: -18 },
    { x: -18, y: -18 },
    { x: -18, y: -1.5 },
    { x: -22.5, y: 2.5 },
    { x: -22.5, y: 12.5 },
    { x: -20.5, y: 12.5 },
    { x: -20.5, y: 16.5 },
    { x: -22.5, y: 16.5 },
    { x: -22.5, y: 24.5 },
  ]}

  // These are currently required due to this issue:
  // https://github.com/tscircuit/core/issues/564
  width="50mm"
  height="50mm"
/>
)
PCB Circuit Preview

Flexible PCBs​

info

Interested in flexible PCBs? Upvote this issue on Github!