kicad-pcb-viewer

React components for 3D PCB visualization and 2D schematic viewing of KiCad files — no server required, pure client-side parsing.

Install

npm install kicad-pcb-viewer
# peer deps (if not already installed)
npm install react react-dom three

Components

PCBViewer — 3D PCB Viewer

Renders a .kicad_pcb file as an interactive 3D board using Three.js.

import { PCBViewer } from 'kicad-pcb-viewer';

function App() {
  const [content, setContent] = useState('');

  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    file.text().then(setContent);
  };

  return (
    <div>
      <input type="file" accept=".kicad_pcb" onChange={handleFile} />
      {content && (
        <PCBViewer
          content={content}
          fileName="my-board.kicad_pcb"
          height="600px"
          width="100%"
          solderMaskColor="green"
          copperFinish="enig"
        />
      )}
    </div>
  );
}

PCBViewerProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | required | Raw .kicad_pcb file content | | fileName | string | 'PCB' | Display name in the header | | height | string | '600px' | CSS height of the viewer | | width | string | '100%' | CSS width of the viewer | | defaultSidebarOpen | boolean | true | Show sidebar on load | | defaultVisibility | Partial<VisibilityState> | — | Override initial layer visibility | | solderMaskColor | 'green' \| 'blue' \| 'red' \| 'black' \| 'white' | 'green' | Board solder mask colour | | copperFinish | 'enig' \| 'hasl' \| 'osp' \| 'bare' | 'enig' | Copper finish type |

KiCadSchViewerEmbed — 2D Schematic Viewer

Renders a .kicad_sch file as an interactive 2D schematic — pan, zoom, hover tooltips, dark/light themes.

import { KiCadSchViewerEmbed } from 'kicad-pcb-viewer';

function App() {
  const [content, setContent] = useState('');

  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    file.text().then(setContent);
  };

  return (
    <div style={{ height: '600px' }}>
      <input type="file" accept=".kicad_sch" onChange={handleFile} />
      {content && (
        <KiCadSchViewerEmbed
          content={content}
          fileName="my-schematic.kicad_sch"
          initialTheme="dark"
        />
      )}
    </div>
  );
}

KiCadSchViewerEmbedProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | required | Raw .kicad_sch file content | | fileName | string | '' | Shown in the toolbar header | | initialTheme | 'dark' \| 'light' | 'dark' | Initial colour theme |

Controls: Scroll to zoom · Drag to pan · Hover symbols for reference/value tooltip.

KiCadSchViewer (default export) — Standalone Schematic Page

A full-page drop-zone wrapper around KiCadSchViewerEmbed. Useful as a standalone route/page — the user drops a .kicad_sch file and it renders immediately.

import KiCadSchViewer from 'kicad-pcb-viewer';

// Renders a full-page file drop zone → schematic viewer
function SchPage() {
  return <KiCadSchViewer />;
}

Utility exports (PCB)

import {
  parsePCB,               // (content: string) => PCBData
  generateArcPoints,      // arc point interpolation helper
  reconstructBoardOutline,// board outline polygon builder
  COLORS_3D,              // Three.js colour constants
} from 'kicad-pcb-viewer';

Types

import type {
  // PCB
  PCBViewerProps, PCBData, Footprint, Pad,
  Segment, Arc, Via, ZonePolygon,
  BoardOutlineSegment, VisibilityState,
  // Schematic
  KiCadSchViewerEmbedProps,
} from 'kicad-pcb-viewer';

Example: show both viewers side-by-side

import { useState } from 'react';
import { PCBViewer, KiCadSchViewerEmbed } from 'kicad-pcb-viewer';

export default function Demo() {
  const [pcb, setPcb] = useState('');
  const [sch, setSch] = useState('');

  const load = (setter: (s: string) => void) =>
    (e: React.ChangeEvent<HTMLInputElement>) =>
      e.target.files?.[0]?.text().then(setter);

  return (
    <div style={{ display: 'flex', gap: 16, height: '100vh' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <input type="file" accept=".kicad_pcb" onChange={load(setPcb)} />
        {pcb && <PCBViewer content={pcb} height="100%" />}
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <input type="file" accept=".kicad_sch" onChange={load(setSch)} />
        {sch && <KiCadSchViewerEmbed content={sch} height="100%" />}
      </div>
    </div>
  );
}

Build

npm run build   # outputs CJS + ESM + .d.ts to dist/

License

MIT