KiCad Viewer for project documentation

I’ve just written this lightweight Javascript library for embedding KiCad schematics & PCBs into web documentation, primarily for my own projects, but I hope other people might find it useful too:
https://climbers.net/sbc/kicad-web-viewer/

(this post might be better in the External Plugins category even though it isn’t strictly speaking a plugin?)

Some of the features:

  • Display a KiCad PCB with layer on/off controls, zoom/pan
  • Display a KiCad schematic with zoom/pan
  • Search for component reference/value with Ctrl + F
  • Pure Javascript library with no dependencies, 17Kb minimised, 6Kb gzipped
  • Works on any browser that supports SVG (IE9 and later)
  • Zoom with mouse wheel, double click, touch pinch, or keyboard shortcuts
  • Pan with mouse drag, touch drag, or keyboard shortcuts
  • Mobile-compatible, tested with Android and iOS
  • Optional list of custom PCB layer names

I particularly like how easy it is to switch between showing the PCB top layers vs bottom layers with the PageUp/Down key shortcuts, and being able to flip the entire PCB with the F key so the bottom silkscreen is readable.

10 Likes

I’ve now added a script export-pcb.sh that uses the Pcbnew API to export an SVG with the standard layers/colours. eg, you could trigger this each time you commit a change to github.

Unfortunately there doesn’t appear to be an equivalent API for automating actions in Eeschema? :cry:

1 Like