Need help with tracespace?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.


⚡️generate beautiful and accurate SVG renders of printed circuit boards

496 Stars 59 Forks MIT License 349 Commits 29 Opened issues

Services available

Need anything else?


ci coverage dev dependencies chat

PCB visualization tools for Node.js and the browser

tracespace is an open-source collection of tools to make looking at circuit boards on the internet easier.


Renders of the Arduino Uno produced by pcb-stackup and gerber-to-svg:

arduino uno top arduino uno bottom

Arduino Uno design files used under the terms of the Creative Commons Attribution Share-Alike license.

Individual layers

top copper

drill hits


top silkscreen

bottom copper

top soldermask

bottom soldermask

tracespace in the wild

  • - A Gerber viewer powered by the tracespace libraries
  • - An electronics project sharing site with links to easily buy the required parts
  • - A social site around open source hardware. Enables authors to sell and manufacture their boards.


This repository has one web-app that is published to


Probably the best printed circuit board viewer on the internet

A Gerber viewer powered by the tracespace libraries. Available at


This repository also contains several packages that are published to npm. See them all below!


latest next

Render PCBs as beautiful, precise SVGs from Gerber / NC drill files


latest next

Render PCBs as SVGs from the comfort of your own terminal


latest next

Layer stacking core logic for pcb-stackup


latest next

Render individual Gerber / NC drill files as SVGs


latest next

Streaming layer image plotter (consumer of



latest next

Streaming Gerber/drill file parser


latest next

Identify Gerber and drill files by filename


latest next

XML ID generation and sanitation utilities for tracespace projects


latest next

Test fixtures for tracespace projects


We could use your help maintaining and growing the tracespace ecosystem! Issues and pull requests are greatly appreciated.

development setup

The tracespace tools live here in this monorepo. We use yarn and lerna to manage this setup.

Node v8 (lts/carbon) or later is recommended.

# clone repository and install dependencies
git clone [email protected]:tracespace/tracespace.git
cd tracespace
yarn install

This repository adheres to the Conventional Changelog commit specification for automatic changelog generation. We recommend installing commitizen to ensure your commit messages are properly formatted:

yarn global add commitizen

later, when you're ready to commit

git add some/files/* git cz

All development scripts below should be run from the root of the repository. Lerna handles delegating scripts downwards to the individual projects as necessary.


Automated tests consist of unit tests along with integration snapshot tests of SVG and data outputs.

# run unit and integration tests tests with coverage
yarn test

set SNAPSHOT_UPDATE=1 to update integration test snapshots


run unit tests in watch mode (no coverage)

yarn test:watch

set INTEGRATION=1 to also include integration tests

INTEGRATION=1 yarn test:watch

development servers

, and
have development servers. The first three serve a set of reference renders for manual visual inspection, and the
development server builds and serves the web-app locally.
# run all dev servers
yarn start

run server for a specific project

yarn start --scope @tracespace/view

production assets

There are two production asset types that you can build:

  • Full web-app bundles
    • @tracespace/view
  • Standalone library bundles
    • gerber-parser
    • gerber-plotter
    • gerber-to-svg
    • pcb-stackup-core
    • pcb-stackup
    • whats-that-gerber

To build them:

# build production bundles
yarn build


builds all production bundles, example files, and documentation

yarn build:all

build all bundles and serve them for testing/validation

yarn serve

as with the dev server, these commands may be scoped by name

yarn build --scope gerber-parser yarn serve --scope @tracespace/view

linting and formatting

# format the code for styling
yarn format

lint the code for potential errors

yarn lint

typecheck any typescript code

yarn types


Packages are published to npm by the CI server. To publish a release, you must have write access to the repository. There is a

script in the
that will:
  • Run all tests
  • Write new version to
    in updated packages
  • Generate / update the changelogs
  • Commit, tag, and push to git

First, checkout and pull down the latest commits on

git checkout main
get pull origin main

Then, bump the version:

# by default, bump to the next version as determined by conventional commits
yarn bump

you may specify a bump level or exact version

prerelease bumps will be prefixed with "next", e.g. 4.0.0 -> 4.0.1-next.0

yarn bump ${major|minor|patch|premajor|preminor|prepatch|prerelease} yarn bump v42.0.0

to do a "dry run", you can stop before commit and tag

yarn bump --no-git-tag-version

After you bump, push the commit and tag:

git push origin main --follow-tags

The release will be published to the

npm tag for bare versions (e.g.
) and to
for pre-release versions (e.g.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.