Projects »

KiCad Web Viewer

Lightweight 17Kb Javascript library for embedding KiCad schematics and PCBs in web documentation, with zoom/pan & search

Documenting an electronics project includes the circuit schematics & PCB layout, but standard options either don’t allow zooming in and searching (static image), or PCB layers can’t be turned on/off (static image, PDF), or require having a large application installed just to view downloaded project files. KiCadWebView uses SVG export from the free electronics design tool KiCad to provide an easy option that integrates well with web documentation.

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

Examples

The easiest option is to inline the PCB and schematic files into a web page:

However inlining means the (potentially large) SVG files are always loaded even if the user doesn’t look at them. Using static low-resolution thumbnails which link to the full SVGs gives much faster page loading:

How to use it

Open your project PCB in KiCad’s Pcbnew
Set each layer you want to a unique colour. eg. Edge.Cuts will merge with F.Fab if you keep them both as the Yellow 3 default
Using File→Export→SVG... tick the layers you wish to include, and choose Board area only and All layers in a single file. Click Export to save as projectname-brd.svg
Open your project schematic in KiCad’s Eeschema
Using File→Plot... choose SVG for the Output Format, then click Plot Current Page to save as projectname.svg
Compress the SVG files with the free Nano SVG Compressor. This outputs a format that the library can use, as well as making the files ~80% smaller so they load much faster
Install the KiCadWebView.css and .js file on your site
Add the SVG files to your web page with the following code:

page.html
<link rel='stylesheet' type='text/css' href='KiCadWebView.css' />
<script src='KiCadWebView.min.js'></script>

<svg id="my_schematic" xmlns="http://www.w3.org/2000/svg" ... </svg>
<svg id="my_pcb" xmlns="http://www.w3.org/2000/svg" ... </svg>

<script>
KiCadWebView.schematic('my_schematic');
KiCadWebView.pcb('my_pcb');
</script>

To use id= attributes you'll need to add them to the start of each SVG file, and the id must be be unique if you have multiple SVGs on the same page. Instead of passing the element id (string) you can optionally pass the element object itself, which can be useful for dynamic loading of SVG files or if no id is set:

var el = document.getElementsByTagName('svg')[0]; // first svg on page
KiCadWebView.pcb(el);

PCB layer names aren’t exported by KiCad, so the library guesses using the default KiCad names & colours. You can optionally pass a list of custom names & colours:

var custom_layers = {"Front Tracks":"rgb(132,0,0)", "Rear Tracks":"rgb(0,132,0)"};
KiCadWebView.pcb('my_pcb', custom_layers);

Using it with KiCad v6 or v7

This viewer was originally written for KiCad v5, and later versions of KiCad’s Pcbnew have bugs¹ (schematic continues to work as normal):

For KiCad v7 don’t use File→Export→SVG... as this outputs SVGs that do not render correctly in web browsers. Instead use File→Plot in Pcbnew and select Plot format: SVG, Output mode: Color, Drill marks: Actual size, and tick the layers you'd like in Plot on All Layers. You only need to tick one option in Include Layers, and this will save a single SVG file when you click Plot.

I don’t think there is a workaround for KiCad v6 users, but please let me know if you find one.
¹Tested with KiCad v6.09 and v7.08

Keyboard shortcuts

The following KiCad-compatible shortcuts are supported:

F1	Zoom in
Alt + F1	Zoom in
F2	Zoom out
Alt + F2	Zoom out
F4	Center the view on current mouse position
Home	Reset to initial view
Shift + Arrows	Pan left/right/up/down
Ctrl + F	Search for component reference/value
Return	Go to next search result
Escape	Close search
F	Flip board over (PCB)
Page Up	Show top layers only (PCB)
Page Down	Show bottom layers only (PCB)

Styling the results

You can easily customise the style to better fit with your web page/site. KiCadWebView uses the following CSS classes which you can extend or override with your own stylesheet:

`.kicadwrap`	DIV tag that wraps the SVG, layers & search
`.kicadpcb`	SVG tag used for displaying a PCB
`.kicadschematic`	SVG tag used for displaying a schematic
`.kicadui`	UL tag for list of PCB layers
`.kicadfind`	FORM with text box for providing search

By default the SVG is shown in a resizable DIV with aspect ratio 600:412 (width:height). You can optionally pass a different ratio as a number:

KiCadWebView.schematic('my_schematic', 600/480);
KiCadWebView.pcb('my_pcb', null, 600/480);

Download files

Zoom & pan functionality is provided by the SVGPanZoom library, which is bundled with KiCadWebView.js for faster loading.

KiCadWebView library minified & full versions (zip archive)
SVGPanZoom github by Chandrasekhar Ambula (not required)

Automated exports

You can partially automate the export process with a python script export-pcb.sh, included in the library zip archive above. eg, you could trigger it for a git commit. It uses the Pcbnew API to export an SVG with the standard layers/colours.

Unfortunately there isn’t a python API for KiCad schematics, so the best you can do is the hideous hack of emulating key presses to automate Eeschema in export-schematic.sh. This has only been tested on Windows and will need changes depending on your OS/desktop.

You still need to run the outputs through the Nano SVG compressor which doesn’t have an API (unless you pay for Nano Pro).

Future improvements

Can it support other EDA packages like Altium or EAGLE?
Investigate alternative SVG compressors that can be called from a script
Button to open search for touchscreen devices
Button to collapse/expand layers list?
Better layers list presentation for mobile/small screens
Visual indication of search failure: flash input border with CSS animation?
Help box with project homepage and list of keyboard shortcuts?
Click in layers list to move a layer to the top of render stack? (not hidden by other layers) ala KiCad
Option to link SVGs together so search by reference locates simultaneously on PCB and schematic?

Share this on Facebook

Nikki Smith, May 2021. Last updated October 2023