KiCad WebView

Interactive electronics. Anywhere on the web.

Live demos · Documentation · API reference · Releases

Embed read-only KiCad schematics, PCB layouts and interactive 3D boards in websites, blogs and applications. Inspect parts, pads, nets and layers; link views; navigate complete projects; or bundle a design and viewer into one portable HTML file. Gerber and Excellon support brings fabrication files into the same viewer.

Everything needed for native KiCad viewing runs in the browser. Visitors need no KiCad installation, account, Node.js server or rendering service. Local files stay in browser memory; remote designs are fetched from the sources you choose.

Free to use, including commercially, under MPL-2.0. Paid help with embedding, customization, maintenance, and support is optional; you do not need to buy services to use or integrate the library.

Start here

Try the public demonstrations.
Follow the quick start for classic scripts, ES modules, iframes and self-hosting.
Read the user guide or API reference.
Download a release, or build this checkout.

Release 0.5.0 adds an independent native BOM panel, grouped/searchable saved parts, CSV export and lazy saved-board analytics with linked source selection. BOM API and limits. It retains registered WayriCAD fields on the native 3D board, layer selection and linked probes from 0.4.0. Extension sync evidence.

WayriCAD results: load retained PI fields, SI graphs and thermal frames alongside an exact-hash-matched PCB, inspect source-linked routes and explore supported independent 3D fields. WayriCAD result API and limits.

New inspection controls include configurable highlight styles and source colors, searchable layers with presets, PCB layer focus/fit/restore, and a 3D copper-layer selector. Inspection controls and API.

Install from npm or use a CDN

npm install @wayrisignals/kicad-webview@0.5.0

import { Viewer } from '@wayrisignals/kicad-webview';
const viewer = new Viewer('#board', { theme:'dark', inspectOnSelect:false });
await viewer.load('/designs/project.zip', { view:'3d' });

For direct browser use, pin the version and load the classic script. No npm installation, Node.js server or build step is needed:

<div id="board" style="height:70dvh;min-height:360px"></div>
<script src="https://cdn.jsdelivr.net/npm/@wayrisignals/kicad-webview@0.5.0/dist/kicad-webview.min.js"></script>
<script>
  const viewer = new KiCadWebView.Viewer('#board', { theme:'dark' });
  viewer.load('/designs/project.zip', { view:'3d' }).catch(console.error);
  window.addEventListener('pagehide', () => viewer.dispose(), { once:true });
</script>

The self-contained ES module is available at jsDelivr or UNPKG. The classic script is available from either CDN at the matching path. Self-host the package contents for offline use and keep its license and notices. The npm artifact contains the viewer, matching covered source, types, documentation and source-parameterized iframe entry; legacy board fixtures and fixture-backed example pages are excluded. Current IRCA and credited public-board demonstrations remain on the website.

The linked hierarchy demo combines this library’s selection and 3D focus APIs with a source-bound website sheet adapter. See the integration guide for that host integration.

A viewer in a few lines

After building, serve the generated dist/ folder with your static website:

<div id="board" style="width:100%;height:70dvh;min-height:360px"></div>
<script src="./dist/kicad-webview.min.js"></script>
<script>
  const viewer = new KiCadWebView.Viewer('#board', {
    theme: 'dark',
    inspectOnSelect: false
  });
  viewer.load('./designs/project.zip', { view: '3d' })
    .catch(error => console.error(error));
  window.addEventListener('pagehide', () => viewer.dispose(), { once: true });
</script>

The same distribution includes an ES module (kivi-viewer.js), a custom element, an iframe entry and a browser-only exporter. Give each viewer a usable height. Preserve legal notices and the matching-source link when distributing builds. Hosting guide · Public API

Translucent inspection and progressive loading

Choose Display → Appearance → Translucent, or call viewer.setAppearance(‘translucent’) after opening 3D. The board and component models become translucent; copper uses saved layer colors and filled zones stay faint. Internal copper is built only when requested. Missing stackup elevations are labelled illustrative. Selection, layer visibility and normal rendering remain available. See 3D appearance and performance.

Capabilities

Workflow	What you can do
Schematic and PCB inspection	Pan, zoom, choose layers, search components, inspect saved properties and highlight actual copper nets
3D inspection	Orbit, pan, use on-screen camera controls, focus selected parts on their mounting side and highlight nets with dimmed surroundings
Project navigation	Browse listed files and saved child-sheet links in independent split or single panes, without comments or CAD editing
Linked embeds and view links	Cross-select exact saved identities and restore source-bound cameras, layers and selections
Presentation	Build live project/board carousels and opt into enhanced 3D presentation rendering
Scripted controls	Add virtual LEDs, OLED/LCD/matrix/TFT displays, buttons, knobs and focus-scoped keys
Fabrication files	Inspect the supported Gerber/Excellon subset, overlay layers and measure distances
Analysis results	Display supplied scalar fields with units, assumptions, provenance and exact source-hash binding
Hierarchy diagrams	Independently generate a root/subsheet tree and export script-free SVG
Portable sharing	Load bounded ZIP bundles and export a self-contained interactive HTML document

See examples, format limits, advanced workspace, interactive demos and integration guides. Slack and Notion can use self-contained HTML where their clients support it; Confluence’s Forge adapter requires separate setup. The optional Altium adapter uses an external provider, not native offline Altium parsing.

Load a project

Load a supported drawing URL, a project ZIP, a manifest, supported public GitHub links, or local browser files. Cross-origin sources need CORS; the library cannot bypass permissions or authentication. A manifest explicitly lists drawings and optional linked models:

{
  "entry": "board.kicad_pcb",
  "files": [
    { "path": "board.kicad_pcb", "url": "./board.kicad_pcb" },
    { "path": "board.kicad_sch", "url": "./board.kicad_sch" },
    { "path": "models/connector.wrl", "url": "./models/connector.wrl" }
  ]
}

Saved model paths must resolve to supplied assets. Missing models remain labelled stand-ins; portable STEP decoding is not included. Private design URLs should not be put into public embeds or share links.

Build and verify

Development requires Node.js 22+ and the pinned npm dependencies. Deployed visitors do not need Node.js.

npm ci
npm run build:3d
npm run build
npm test
npm run preview

KICAD_WEB_BUILD_DEPS can reuse a compatible existing dependency directory. Full and classic builds contain no external JavaScript imports. The lite module defers 3D and analysis; deploy its complete relative chunk directory. To generate a versioned static SDK ZIP from committed sources, run npm run package:static.

Source lives in src/ and engine/; dist/ is generated. Contributing · Security reports

Scope and fidelity

This is a read-only interpretation of saved design data. It does not edit CAD files, run firmware, execute native ERC/DRC or engineering solvers, or certify manufacturing readiness. Imported analysis is supplied evidence, not a solver run. Unsupported constructs and approximate models have visible diagnostics. Saved UUID relationships do not establish a complete hierarchical electrical netlist. Compatibility and limitations

License and support

MPL 2.0 permits commercial use and proprietary host applications. Distributed changes to covered files must remain available as source under MPL; keep notices and provide matching source for minified builds. Licensing details · Third-party notices · Project name policy

The software license does not grant rights to users’ designs or automatically license the hardware examples. Their provenance remains separate. The project is independent of KiCad, Altium and the host platforms.

KiCad WebView is free to use, including commercially, under MPL-2.0. No payment or individual commercial-use approval is required.

Need help embedding or customizing KiCad WebView? Optional paid implementation, maintenance, and support are available at support.kivi@sigharmonic.com. You do not need to buy these services to use or integrate the library.

Mobile integration: loading, rendering and performance guidance.