KiCad Viewer for project documentation

Hi, just joined the forum, but I’ve followed the Contextual Electronics tutorials on YouTube for ages. In fact that is what originally got me using KiCad and designing my own simple PCBs :heart_eyes:

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:

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

Nicely done! I’m working on documentation as we speak so this is perfect timing!

Looking forward to trying it out

Great, thanks. I’m eager to hear any feedback/suggestions. Hopefully it is easy to use? It would be embarrassing if a project aimed at improving documentation was itself poorly documented :blush:

I always love finding people who value documentation - it can be so easily overlooked. I’d like to post this to my LinkedIn if that’s ok?

1 Like

Please do share it.

I agree that documentation is often underappreciated by developers. There are so many fantastic & clever open source/hardware projects out there without even the bare minimum of a couple of paragraphs describing what the project is for and how to learn more about using it :disappointed: Even quite popular projects with multiple active developers often have absolutely no documentation, or it is multiple releases out of date.

1 Like
1 Like

I wonder if this concept could be applied to git repositories. Even though I am in the camp of making good documentation, I myself sometimes update a KiCad project repo and forget to print a new PDF of the schematic and/or board. If I could just put some magic incantation in the file, that would certainly be helpful


That sounds like a great idea @rclott :smiley: I don’t think you can include Javascript in a github README? but you could link a static thumbnail of the schematic/PCB to a full version hosted on a page, with my library providing zoom, pan, search, etc.

And it looks like you can script an SVG export from KiCad, so you could have the export trigger each time you update the repo? If someone wants to contribute that, I’d love to add it to my library documentation.

1 Like

So cool! I don’t need it right now, but I can’t wait until I do :slight_smile:

I can imagine one cool improvement would be to auto-generate the requisite files, hands-off, from kicad source files. Anyone know if you can script kicad in headless mode?


Wow! Very cool, works really smoothly in the demo.

Would love to include this for KiCad projects on We integrated Interactive HTML BOM not too long ago and could give this a similar treatment. Would you be ok with that @sheffield_nikki? Have you thought about what license you want to put on your code?

Thanks @kaspar, I’d be honoured if you integrated my web viewer into kitspace :star_struck:

I hadn’t thought about licences, but I’ve now added the MIT licence to the zip archive.

1 Like

Nice one @sheffield_nikki. For SVG plotting I recommend trying to adapt one of @gregdavill’s scripts. Looks like this one could be extended to use PLOT_FORMAT_SVG instead of PLOT_FORMAT_GERBER.

I’ve now got a working python script for automating PCB export, with standard layers and colours. It’s in the project zip archive if anyone would like to test it?

Schematic Python API and file format is going to be much improved fo v6 I believe, so might be worth just holding out for that. Some people seem to have some success with using xdotool with these scripts on Linux:

The project zip archive now includes a working python script for automating schematic exports BUT it is a horrible hack and I don’t know if it can be made to work on all OS/desktops. Basically it loads Eeschema, fires off a series of keyboard shortcuts and then quits the app :grimacing: I’ve only tested it on Windows.

Hopefully KiCad v6 when it arrives will have an API for this sort of thing, and I can replace the current hack.