tracespace view

https://tracespace.io/view

Probably the best Gerber viewer on the internet. @sctg/tracespace-view uses the pcb-stackup library to render Gerber and NC drill files as SVGs in your browser, without ever sending your files to a server.

Your renders are saved locally, so you can check out your boards without constantly having to re-upload your Gerber files.

embedding as a React component

The package exports <TracespaceViewer>, a self-contained React 19 component. See the main README for full usage instructions.

Quick start:

import '@sctg/tracespace-view/style.css'
import {TracespaceViewer} from '@sctg/tracespace-view'

export default function MyPage() {
  return (
    <TracespaceViewer
      showLoadFiles={false}
      showAnalyticsOptin={false}
      file="/boards/my-board.zip"
    />
  )
}

Props summary:

| Prop | Type | Default | Description | |------|------|---------|-------------| | showNav | boolean | true | Show/hide the top navigation bar | | showPageTitle | boolean | true | Show/hide the page title | | showPageTitleLogo | boolean | true | Show/hide the tracespace logo | | pageTitle | string | "tracespace" | Main title text | | pageSubtitle | string | "view" | Subtitle text | | showLoadFiles | boolean | true | Show/hide the file upload interface | | file | string \| File \| Blob \| Array<File \| Blob> | — | File(s) to load programmatically | | useStorage | boolean | false | Persist state in IndexedDB | | showAnalyticsOptin | boolean | false | Show/hide the analytics opt-in modal on first visit |

Building the library bundle:

npm run build:lib

This generates lib/index.js (pre-compiled ESM) and lib/style.css (pre-built Tailwind styles). The worker is inlined as a base64 blob so no separate asset file is needed.

architecture

The app is very similar to a typical React + Redux application. A central state store is available all through-out the app, and much of the UI is derived directly from that state.

The state can be changed by dispatching a specific action to the store, which will fold the action into the state. As the action is being processed, it will pass through a series of middleware that can trigger side-effects, like triggering a render.

For more information, see the state module

styling

The app uses Tailwind CSS 4.2.4 through the official @tailwindcss/vite 4.2.4 plugin. Global styling is defined in src/styles/index.css, including the app theme via Tailwind's @theme directive.

Component styling lives directly in TSX as Tailwind utility classes. The old Tachyons stylesheets and local reset.css, skins.css, and animation.css files have been removed.

rendering

The app runs pcb-stackup and various file reading libraries in a separate thread from the main UI via a Web Worker. The render worker responds to and emits application store actions via the [render middleware][render-middleware]/

For more information, see the render module.

local storage

Source files and their associated renders, as well as application preferences, are stored locally using IndexedDB. The app has two databases:

• BoardDatabase
  • Accessed exclusively by the render worker
  • Stores board information, layer information, and source files
• AppDatabase
  • Accessed from the main UI thread via the settings middleware
  • Stores application preferences and information

analytics

The tracespace view application collects anonymous usage data if you opt-in to tracking. See the analytics module for more information

debugging

To debug the application state, you can change the app's log level using your browser's JavaScript console:

localStorage.setItem("logLevel", "debug");

Available log levels are:

• debug (default in development)
• info
• warn (default in production)
• error

At logLevel: 'debug', all actions and state changes will be logged