Skip to main content

Displaying Circuit JSON on a Webpage

Circuit JSON is a universal intermediary format for representing an electronic circuit. It contains PCB, Schematic, 3D, Bill of Materials and simulation information.

tscircuit code always converts into Circuit JSON, which can be displayed in any of our React components

tip

You can also upload your Circuit JSON to circuitjson.com for a quick preview!

Circuit JSON Pipeline

React: Display all available previews with <CircuitJsonPreview />​

The <CircuitJsonPreview /> component is a simple way to display all available previews for a Circuit JSON array. You can use it by installing the @tscircuit/runframe package and importing it into your React project.

import { CircuitJsonPreview } from "@tscircuit/runframe"
import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"

export default () => (
  <CircuitJsonPreview
    circuitJson={renderToCircuitJson(
      <board width="10mm" height="10mm">
        <resistor name="R1" resistance="1k" footprint="0402" />
      </board>,
    )}
  />
)

You should see something like this:

RunFrame Preview

For more examples and usage, check out the runframe repo and the examples directory!

info

Have tscircuit code and want to skip converting to Circuit JSON? Try using the <RunFrame /> component directly to build your circuit in the browser!

React: Running tscircuit code in the browser (no Circuit JSON needed!)​

The <RunFrame /> component is a simple way to run tscircuit code in the browser. RunFrame loads the tscircuit runtime (and all the dependencies to build Typescript code) into a WebWorker and runs the code in the background.

To use RunFrame, you must provide a fsMap object. This object maps file paths to file contents. Files inside this "filesystem map" can import each other, this is super useful when you have many files to import such as a manual-edits.json file!

import { RunFrame } from "@tscircuit/runframe"

export default () => (
  <RunFrame
    fsMap={{
      "main.tsx":
`
circuit.add(
  <board width="10mm" height="10mm">
    <resistor name="R1" resistance="1k" footprint="0402" />
    <capacitor name="C1" capacitance="1uF" footprint="0603" pcbX={4} />
    <trace from=".R1 .pin1" to=".C1 .pin1" />
  </board>
)
`,
    }}
    entrypoint="main.tsx"
  />
)

You can see different examples of how RunFrame looks for different circuits on the RunFrame online examples page

<RunFrame /> automatically handles imports from the tscircuit registry

Displaying Circuit JSON without React​

Are you interested in this? Please upvote this issue so we can prioritize it!