KiCanvas Helps Teach And Share KiCad Projects In Browsers

KiCad is undeniably the hacker favourite when it comes to PCB design, and we’ve built a large amount of infrastructure around it – plugins, integrations, exporters, viewers, and much more. Now, [Stargirl Flowers] is working on what we could call a web viewer for KiCad files – though calling the KiCanvas project a “KiCad viewer” would be an understatement, given everything it aims to let you do. It will help you do exciting things like copy-pasting circuits between KiCad and browser windows, embed circuits into your blog and show component properties/part numbers interactively, and of course, it will work as a standalone online viewer for KiCad files!

Of course, the “board viewer” part of the project is exceptionally handy alone, and will let you quickly show your PCB designs to others without having KiCad installed. When it comes to schematics and PCB embed features, we can already see examples of KiCanvas in action, too – with exploreable circuits in the extensive writeup about a RP2040-based LumenPnP control board, and a PCB view in an assembly guide for a precision adder. Quite a few basic goals are already achieved and the project aims to become open-source in February, but there’s plenty to work on – mobile browser support, blog integrations, assembly helper features, and of course, an inevitable pile of testing and polish – for these, you can sponsor [Stargirl] on GitHub, for perks like early access to the project.

When sharing your projects with others, embedding a JPEG of your schematic only gets you so far, so given all the interactivity you can have, browsers and KiCad files are a match made in heaven. Projects like KiCanvas end up as building blocks that hackers can rely on – like the InteractiveHtmlBom project, which now helps quite a few projects provide assembly diagrams, or the Pinion project that lets you quickly create wiring diagrams for your PCB.

You can also embed parts of your schematic or layout in web pages, perfect for educational articles and documentation. Select the items in KiCAD, copy, and then pass the copied text along to KiCanvas's <kicanvas-viewer> element. You can even make links to individual symbols! pic.twitter.com/FxaCYm3Igq

— Stargirl (@theavalkyrie) December 29, 2022

We thank [Ben Delarre], [Mithro] and [Helge Wurst] for sharing this with us!