PCB Viewer
https://github.com/tscircuit/pcb-viewer- Category
- Developer Tools
- Rank
- No. 1535Tools index
Previous survey · No. 1507 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- tscircuit
- GitHub
- 22 stars
- Date
About
React PCB viewer for rendering Circuit JSON in the browser, part of the tscircuit electronics toolchain.
What it does
PCB Viewer gives a React application an interactive canvas for inspecting and adjusting board layouts. It accepts declarative circuit components or existing circuit data, then draws layers with pan, zoom, selection, measurement, placement editing, and trace routing. Edit events can be supplied externally and reported back to the host application.
Why it's ranked here
This is a capable embedded workspace, not merely a passive diagram. Layer controls, design-rule error visualization, measurements, component movement, and routing cover useful inspection and editing tasks. Its event-based editing interface also lets a host application retain control of changes.
What's good
The viewer handles top, bottom, and inner copper layers, plus solder mask, silkscreen, fabrication notes, courtyards, copper pours, and board notes. It automatically frames board geometry, supports touch interaction, highlights vias, persists display preferences, and can return rectangular selections to its host.
Tradeoffs
It targets browser applications built with React and expects tscircuit as a peer dependency. Editing is enabled by default, so read-only embeds must opt out. The documented input paths center on circuit components and Circuit JSON. Image export is explicitly delegated to a separate project.
How to use it well
Use it inside a React-based electronics application where users need to inspect layers, diagnose rule errors, measure geometry, move components, or route traces. Keep edit events in application state when changes must be controlled or persisted. Choose the separate image-rendering project when the output must be a static image.
Technical notes+
package.json publishes only dist as the @tscircuit/pcb-viewer npm package, declares ESM output, and builds src/index.tsx for the browser with declarations and source maps. src/index.tsx exports PCBViewer and CanvasElementsRenderer. src/PCBViewer.tsx filters input to PCB and source elements, applies ManualEditEvent records through applyEditEvents, computes board bounds for automatic framing, and exposes controlled edit callbacks. src/global-store.ts uses Zustand for layer, tool, visibility, and persisted display state. src/lib/Drawer.ts implements layered Canvas 2D drawing, while src/lib/draw-via.ts and src/lib/draw-hole.ts delegate element rendering to circuit-to-canvas.
Observed
- License
- MIT
- Primary language
- TypeScript and TSX
- Packaging
- Published as the @tscircuit/pcb-viewer npm package with ESM output
- Interface
- React component library
- Platform
- Browser-targeted build
- Peer dependencies
- React and tscircuit
- Distribution surface
- The package publishes its dist directory
Read from README.md, package.json, src/index.tsx, src/PCBViewer.tsx, src/global-store.ts, src/lib/types.ts, src/lib/Drawer.ts, src/lib/colors.ts, src/lib/toast.tsx, src/pages/index.tsx, src/lib/draw-via.ts, src/pages/eagle.tsx, src/lib/draw-grid.ts, src/lib/draw-hole.ts, src/lib/draw-eagle.ts.
What it can do
Render Circuit JSON files
Circuit JSON data → Visual PCB representation in browser
Display PCB layout in web browser
PCB design data → Interactive PCB visualization
View circuit board components and traces
Electronic circuit data → Visual representation of components and connections
Parse and visualize tscircuit electronics data
tscircuit format files → Rendered PCB viewer interface
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.