KiCad PCB Renderer

3D PCB viewer for KiCad files in React.

Installation

npm install react three @react-three/fiber @react-three/drei sexp

Usage

Simple (2 lines)

import { PCBViewerWithUpload } from './src';

<PCBViewerWithUpload />

With File Blob

import { PCBViewer } from './src';

function App() {
  const [file, setFile] = useState(null);
  
  return (
    <>
      <input type="file" onChange={e => setFile(e.target.files[0])} />
      <PCBViewer file={file} />
    </>
  );
}

Advanced

import { usePCBData } from './src';

function CustomViewer({ file }) {
  const { data, loading, error } = usePCBData(file);
  
  // Use data however you want
  console.log(data.tracks, data.vias, data.zones);
}

Development

npm install
npm run dev

Structure

src/
├── core/          # Pure parsing logic
├── materials/     # Three.js materials
├── geometry/      # Geometry builders
├── components/    # React 3D components
├── hooks/         # React hooks
└── index.js       # Public API