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:

(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.


I’ve now added a script 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

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.