- Category
- Developer Tools
- Rank
- No. 1574Tools index
Previous survey · No. 1524 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- tscircuit
- GitHub
- 18 stars
- Date
About
Runs tscircuit code inside a webworker and renders PCBs, schematics, and 3D previews in the browser.
What it does
Runframe is a React integration layer for interactive tscircuit projects. Give it an in-memory project and entry source; it resolves imported snippets and libraries, converts TypeScript with Babel, exposes completion and error events, and can also load existing circuit JSON on demand without executing source.
Why it's ranked here
Runframe is compelling when a product needs tscircuit execution and inspection without building the whole browser integration. It combines source evaluation, direct JSON viewing, configurable tabs, event callbacks, iframe embedding, and static asset fetching under one package.
What's good
The package supports several useful boundaries. Applications can execute source, preview existing circuit JSON directly, or fetch static builds only when requested. Hosts receive rendering, data-change, and error events. The standalone iframe also communicates with parent applications through browser messages.
Tradeoffs
This is specialized infrastructure for React, browsers, tscircuit source, and circuit JSON. Static builds provide viewing but no source execution. The documented edit workflow also depends on a file server and queued events, while avoiding the default worker delivery route requires supplying a blob URL.
How to use it well
Use Runframe inside a tscircuit editor, documentation playground, project portal, or embedded preview where the host owns files and surrounding workflow. Choose source execution for interactive projects and static loading for published artifacts. It does not itself cover the external file-server and CLI responsibilities described for persisting edits.
Technical notes+
package.json defines the ESM package @tscircuit/runframe, publishes only dist, and exposes preview, runner, standalone, and standalone-preview entry points. lib/runner.ts re-exports the main runner, API and CLI variants, import dialogs, and static viewer. lib/preview.ts exports the circuit JSON preview, BOM table, PCB container wrapper, CAD viewer, PCB viewer, schematic viewer, and ordering hook. README.md documents Babel conversion, automatic import handling, iframe messaging, event callbacks, static JSON fetching, and the file-server event bus. lib/components/PcbViewerWithContainerHeight.tsx uses ResizeObserver plus a window resize fallback to size the PCB viewer.
Observed
- Primary language
- TypeScript and TSX
- Packaging
- Scoped ESM package named @tscircuit/runframe; published files are limited to dist
- Library interfaces
- React runner and preview entry points
- Embedding interface
- Standalone iframe integration using browser postMessage events
- Platform
- Browser, with source execution delegated to a web worker
- Build surfaces
- Separate exports for preview, runner, standalone bundle, and standalone preview bundle
Read from README.md, package.json, src/main.tsx, lib/runner.ts, lib/preview.ts, lib/vite-raw.d.ts, lib/utils/index.ts, lib/api/order-quotes.ts, lib/components/ErrorFallback.tsx, lib/components/FileMenuLeftHeader.tsx, lib/components/LbrnExportOptionsDialog.tsx, lib/components/PcbViewerWithContainerHeight.tsx, lib/components/BomTable/index.ts, lib/components/AiReviewDialog/index.ts, lib/components/ImportComponentDialog/index.ts.
What it can do
Execute tscircuit code
tscircuit code → Executed circuit logic
Render PCB layouts
tscircuit circuit definition → Visual PCB layout in browser
Generate schematic diagrams
tscircuit circuit definition → Schematic diagram visualization
Create 3D circuit previews
tscircuit circuit definition → 3D visual representation of circuit
Run code in isolated webworker
tscircuit code → Safe code execution without blocking main thread
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.