@makediy/viewer

Self-contained PCB Gerber viewer component for React 19 applications. Wraps @sctg/tracespace-view into a single drop-in component with MakeDIY branding, reduced chrome, and scoped styling.

Installation

npm install @makediy/viewer

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

• react >= 18
• react-dom >= 18

It also depends on @sctg/tracespace-view, which is installed automatically as a transitive dependency.

Quick Start

import { PCBViewer } from "@makediy/viewer";
import "@makediy/viewer/styles/viewer.css";

function App() {
  return <PCBViewer />;
}

Note: Import @makediy/viewer/styles/viewer.css once in your application, typically in the page or layout that renders the viewer.

Usage with a File

"use client";

import { useState } from "react";
import { PCBViewer } from "@makediy/viewer";
import "@makediy/viewer/styles/viewer.css";

export default function BoardPreview() {
  const [file, setFile] = useState<File | null>(null);

  return (
    <div className="h-screen w-full">
      <input
        type="file"
        accept=".zip,.rar,.gerber,.gbr,.gtl,.gbs,.gbo,.gbl,.gko"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
      <PCBViewer file={file} />
    </div>
  );
}

API

<PCBViewer />

| Prop | Type | Default | Description | |------|------|---------|-------------| | file | File \| null | undefined | A Gerber file or ZIP archive to load automatically. When omitted, the viewer shows its built-in upload prompt. |

Example with Ref

import { useRef, useEffect } from "react";
import { PCBViewer } from "@makediy/viewer";

export default function ViewerWithRef() {
  const viewerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // viewerRef.current gives you the outer viewer container DOM node
    console.log(viewerRef.current);
  }, []);

  return <PCBViewer ref={viewerRef} file={undefined} />;
}

Styling

Import Once

Add the stylesheet at the page or layout level:

import "@makediy/viewer/styles/viewer.css";

Container Classes

The viewer uses the .makediy-pcb-viewer wrapper class. Size the viewer by controlling the parent container:

<div className="h-[600px] w-full">
  <PCBViewer />
</div>

Custom Properties

The package exposes these CSS custom properties on .makediy-pcb-viewer:

.makediy-pcb-viewer {
  --background: #0c0e14;
  --foreground: #e2e5f0;
  --color-brand: #f97316;
  --color-blue-100: #ffedd5;
  --color-blue-600: #f97316;
  --color-sky-200: #fed7aa;
}

Override them in your own stylesheet if needed:

.makediy-pcb-viewer {
  --color-brand: #your-brand-color;
}

What This Package Changes

Navbar

• Centers the board-settings toolbar.
• Hides the left tracespace logo area.
• Hides the right-side upload/download/settings/help buttons.
• Hides the gear button next to the board name.

Footer

• The tracespace copyright footer is hidden by default via showFoooter={false}.

Zoom Controls

• The bottom zoom slider/scroll bar is preserved.

File Formats

The underlying viewer accepts:

• Gerber files: .gbr, .gtl, .gbs, .gbo, .gbl, .gko, etc.
• ZIP archives containing Gerber files
• File, Blob, or URL string via the file prop

TypeScript

Type definitions are included. The main exports are:

export { PCBViewer } from "@makediy/viewer";
export type { PCBViewerProps } from "@makediy/viewer";

Browser Support

This package relies on @sctg/tracespace-view, which uses modern browser APIs. It is intended for use in evergreen browsers.

License

MIT