wasm-gerber-viewer

WASM/WebGL2-based Gerber file viewer for PCB visualization.

English · 简体中文 · 繁體中文 · 한국어

---

Websites

• Viewer / Mirror
• Sample 1: KLP-5e ESP32 Sensor Board
• Sample 2: Xassette-Asterisk
• Sample 3: OtterCastAmp
• Feature test
• Performance test - Stars: 1K, 10K, 100K, 1M, 5M, 10M, 20M, 50M
• Performance test - Single region: 72K, 648K, 1.8M
• Performance test - Arc region: 1.3M

Features

• High-performance rendering for large Gerber files (>10 MB)
• WebGL2 hardware-accelerated rendering via WASM
• RS-274X Gerber rendering support
• NC drill overlay rendering support
• Touch support for mobile devices
• Multi-layer rendering with per-layer color and visibility control
• Feature picking with selected-area highlighting
• Horizontal/vertical flip controls
• Ruler measurements with mm/inch unit switching
• Screenshot export with resolution options, including ruler overlays

Quick Start

Bash

viewer_url="$(
  curl -fsSL https://api.github.com/repos/dsafdsaf132/wasm-gerber-viewer/releases/latest |
  sed -n '/"browser_download_url": .*\/wasm-gerber-viewer-.*\.tar\.gz"/ {
    s/.*"browser_download_url": *"\([^"]*\)".*/\1/p
    q
  }'
)"

curl -fsSL "$viewer_url" | tar -xz &&
cd wasm-gerber-viewer-* &&
python3 -m http.server 8000

Open http://localhost:8000 and upload Gerber files.

PowerShell

$viewerUrl = (
  Invoke-RestMethod -Uri "https://api.github.com/repos/dsafdsaf132/wasm-gerber-viewer/releases/latest"
).assets |
  Where-Object { $_.name -match '^wasm-gerber-viewer-.*\.tar\.gz$' } |
  Select-Object -First 1 -ExpandProperty browser_download_url

Invoke-WebRequest -Uri $viewerUrl -OutFile viewer.tar.gz
tar -xzf viewer.tar.gz
Remove-Item viewer.tar.gz
Set-Location ((Get-ChildItem -Directory -Filter "wasm-gerber-viewer-*" | Select-Object -First 1).FullName)

python -m http.server 8000

Open http://localhost:8000 and upload Gerber files.

Building

Use this when you need to rebuild the WASM package locally instead of using the prebuilt release artifact.

Requirements:

• Rust stable - install with rustup
• wasm-pack - cargo install wasm-pack

rustup target add wasm32-unknown-unknown
wasm-pack build wasm --target web --out-dir pkg --release

npm Package

wasm-gerber-renderer

JavaScript, Node.js, and CLI package for rendering Gerber files to PNG. Node.js and CLI rendering are supported via node-gles-webgl2.

Project Structure

For the Rust/WASM pipeline and module details, see wasm/README.md.

wasm-gerber-viewer/
├── index.html                         # Application shell
├── package.json                       # Project metadata and scripts
├── css/                               # UI styles
├── js/
│   ├── main.js                        # Browser entry point
│   ├── core/                          # GerberViewer state and orchestration
│   ├── loading/                       # File, archive, URL, repeat, and worker loading
│   ├── layers/                        # Layer list UI, filters, colors, and context actions
│   ├── rendering/                     # Viewport math, measurements, and screenshot export
│   └── ui/                            # DOM lookup, drawer, notifications, diagnostics, options
├── vendor/                            # Vendored browser libraries
├── packages/
│   └── wasm-gerber-renderer/          # npm package and Node CLI
├── wasm/
│   ├── Cargo.toml                     # Rust crate manifest
│   ├── README.md                      # Rust/WASM pipeline notes
│   ├── pkg/                           # Generated wasm-pack output
│   └── src/
│       ├── lib.rs                     # WASM API entry point
│       ├── tests.rs                   # Crate-level tests
│       ├── geometry/                  # Shared geometry model and region contours
│       ├── parser/                    # Gerber parser, apertures, commands, and tests
│       ├── drill/                     # Excellon/NC drill parser and tests
│       ├── interaction/               # Picking, compact payloads, and highlight data
│       ├── renderer/                  # WebGL renderer, GPU resources, shaders, and tests
│       └── util/                      # Formatting and utility helpers
├── demo/                              # Sample and performance Gerbers
├── docs/                              # README assets
├── scripts/                           # Build and deployment scripts
└── .github/workflows/                 # CI, deploy, and release workflows

Browser Requirements

Modern browsers with WebGL2 support:

• Chrome 80+, Firefox 75+, Safari 15+, Edge 80+

Source

Sample archives are loaded from their upstream sources and are not bundled in this repository.

Sample 1: KLP-5e ESP32 Sensor Board

• Project: KLP-5e ESP32 Sensor Board
• Copyright: Copyright (c) 2025, Peter Dalmaris
• License: CERN-OHL-S v2.0
• Archive: https://raw.githubusercontent.com/futureshocked/KLP-5e-ESP32-sensor-board/main/KiCad%20project/dfm/gerber.zip

Sample 2: Xassette-Asterisk

• Project: Xassette-Asterisk
• Copyright: SdtElectronics
• License: CERN-OHL-W v2.0
• Archive: https://processor-cdn.kitspace.org/v6/SdtElectronics/Xassette-Asterisk/6ccd88501c99e2339571de744d003d571be47fad/_/Xassette-Asterisk-6ccd885-gerbers.zip

Sample 3: OtterCastAmp

• Project: OtterCastAmp
• Copyright: Copyright (c) 2021 Ottercast, Niklas Fauth
• License: MIT License
• Archive: https://processor-cdn.kitspace.org/v6/Ottercast/OtterCastAmp/0b5f7f9a8e4e43a5d39048b9a1fa03e5cf7fc9f7/_/OtterCastAmp-0b5f7f9-gerbers.zip

License

MIT License