KiCad WebView Browser library · Beta
An interactive schematic. A board you can inspect. A 3D view you can turn. Bring the design into your documentation with a small browser embed.
Real saved geometry · 153 PCB parts · interactive
Every slide is interactive. Use Previous / Next or opt in to Play. Interacting with the viewer pauses playback; press Play to resume.
Loading the self-hosted inverter…
Pan and zoom the drawing; Fit restores its framing. Open Inspect to search parts. In 3D, drag to orbit and use the surface measurement controls. In fabrication view, toggle layers or measure distances in mm.
Every control below changes the live viewer above.
Isolate saved copper geometry. Zoom in to follow individual tracks; select a track to inspect its saved net.
Each saved sheet is independently navigable. Inspect shows that sheet’s symbols and properties.
Then choose Pad 2 · GPa in Inspect to see the saved pad function, net, dimensions and layers. These are source properties, not simulation results.
Drag to orbit; scroll to zoom. Use the viewer’s View / Measure / Display controls to examine surfaces. Missing models use approximate stand-ins.
Toggle the six exported layers in Layers. Select drill geometry for supplied tool attributes, or use the ruler for a two-click measurement in mm.
Select a trace or use Inspect → Nets to search saved net names. Associated copper is highlighted while unrelated geometry dims. Turn off “Highlight entire net” for object-only selection. Hidden layers stay hidden.
Read-only preview. Missing component models use approximate stand-ins, not verified mechanical geometry. The viewer does not edit designs, run ERC/DRC or execute simulation solvers. Local files opened here are read in your browser, not uploaded by this page.
Advanced / Project workspace
Search the project and compare schematic, PCB and 3D panes.
Navigate: search Files, Parts or Nets. Choose the active pane before opening a drawing. Saved child-sheet links open listed project sheets; unresolved links stay disabled.
Compare: switch between split and single panes. Open a driver schematic in one pane and the PCB or 3D view in the other. Link parts uses unambiguous saved symbol identities between loaded drawings.
Read-only, with no comments or annotation editor. Component linking does not infer identity from reference labels. Nets remain local to their drawing: matching short names across sheets are not proof of connectivity. Approximate 3D model notices still apply.
const project = new KiCadWebView.AdvancedKiCadViewer('#project', {
theme: 'dark', layout: 'split', linkedSelection: true
});
await project.load('/assets/lib/kicad-webview/demo/project.json');
// Give #project an explicit height, e.g. 760px.
// project.dispose() releases both panes when leaving.02 / Simple
Keep the article simple. Let the drawing do the explaining.
From the bench / Inverter layout
A static picture gives an overview. An embedded drawing lets readers zoom into routing, inspect saved component properties and choose the layers they want to see.
The same saved inverter PCB, embedded in the article. Click a part to inspect it.
Self-host the script and project files. No Node runtime is needed on the host server or in the visitor’s setup.
<script src="https://wayri.github.io/assets/lib/kicad-webview/kicad-webview.min.js"></script>
<kicad-viewer
src="https://wayri.github.io/assets/lib/kicad-webview/demo/project.json"
style="display:block;height:500px">
</kicad-viewer>const viewer = new KiCadWebView.Viewer('#board');
await viewer.load('/assets/lib/kicad-webview/demo/project.json');
viewer.setInspectorOpen(true);
// Give #board an explicit height, e.g. 500px.For another site, use the full project URL or host your own copy. Cross-origin sources must permit CORS. See the license before integrating commercially.
Imported analysis · Beta
Illustrative data only. The demo is a deterministic interface example, not an electrical or thermal solve, measurement or validation of this inverter.
Load a sample overlay in the live viewer above. Switch fields, adjust opacity and probe cells to see values with their units. Pan and zoom keep the overlay aligned with the board.
Use Analysis in the viewer for visibility, fixed colour scale, opacity and run assumptions. Layer-linked fields follow saved layer visibility; 3D pauses the overlay. Results must match the exact PCB source hash.
No PI, SI or thermal solver runs here. A direct SPIKE / Quick PI exporter is a future integration.
Open schematic sheets and PCB layouts. Pan, zoom, fit and switch drawings from a project manifest.
Find references and inspect supplied fields, pad numbers, saved nets and layers. Values come from the source file.
Orbit the 3D board and inspect surfaces. Supported WRL or self-contained GLB assets can supply real component models.
Explore Gerber layers, Excellon drills and ZIP bundles. Toggle manufacturing layers and inspect supplied attributes.
Use & availability
KiCad WebView uses a source-available license. Non-commercial use is permitted under its terms. All commercial use requires explicit prior written permission, including internal business use and commercial website integration.
Contact support.kivi@sigharmonic.com for commercial permission. The source repository remains private; npm/CDN publication and live Slack, Confluence and Notion integrations are not claimed here.