@tscircuit/iframe

Run tscircuit code or Circuit JSON inside an iframe. Extremely lightweight wrapper around the tscircuit runframe iframe

Online Playground

Installation

bun add @tscircuit/iframe
# npm add @tscircuit/iframe

Usage

import { TscircuitIframe } from "@tscircuit/iframe"

const fsMap = {
  "index.ts": `
import { PushButton } from "@tsci/seveibar.push-button"
import { SmdUsbC } from "@tsci/seveibar.smd-usb-c"

export default () => {
  return (
    <board width="12mm" height="30mm">
      <SmdUsbC
        connections={{
          GND1: "net.GND",
          GND2: "net.GND",
          VBUS1: "net.VBUS",
          VBUS2: "net.VBUS",
        }}
        pcbY={-10}
        schX={-4}
      />
      <led
        name="LED"
        supplierPartNumbers={{
          jlcpcb: ["965799"],
        }}
        color="red"
        footprint="0603"
        pcbY={12}
        schY={2}
      />
      <PushButton
        name="SW1"
        pcbY={0}
        connections={{ pin2: ".R1 > .pos", pin3: "net.VBUS" }}
        schY={-2}
      />
      <resistor name="R1" footprint="0603" resistance="1k" pcbY={7} />

      <trace from=".R1 > .neg" to=".LED .pos" />
      <trace from=".LED .neg" to="net.GND" />
    </board>
  )
}`,
}

export default () => <TscircuitIframe fsMap={fsMap} />

API

<TscircuitIframe />

| Prop | Type | Description | | --- | --- | --- | | fsMap | Record<string, string> | Map of filenames to file contents that will be executed in the iframe. | | entrypoint | string | Name of the entry file within fsMap. | | code | string | Convenience prop to run a single file. Equivalent to providing fsMap with index.tsx. | | height | string \| number | Height of the iframe. Defaults to 600. | | showRunButton | boolean | Whether to display a run button inside the iframe. | | onRenderFinished | (params: { circuitJson: any }) => void | Called when rendering completes. | | onInitialRender | (params: { circuitJson: any }) => void | Called after the initial, fast render. | | onRenderStarted | () => void | Called when rendering begins. | | onError | (error: Error) => void | Called when an error occurs while running or rendering code. | | onEditEvent | (editEvent: any) => void | Called when the user performs an edit action. | | projectUrl | string | Optional project URL used when reporting autorouting issues. | | evalVersion | string | Version of the tscircuit evaluator to use. Defaults to the latest release. | | forceLatestEvalVersion | boolean | If true, always use the latest evaluator, overriding evalVersion. Defaults to true when evalVersion is not provided. |