Chris Collins

Tools · electronics

Interactive assembly BOM

Hand-assemble a KiCad board from its .kicad_pcb: the BOM grouped by value and footprint with placed and sourced ticks, the parts of the row you are on lit up on front and back drawings (click a part to find its row), side and DNP filters, progress kept per board, keyboard-driven, stock and bins from your Parts inventory, and a standalone HTML copy to keep with the board.

Added

Works with

How to use it

When I solder a board by hand I want to know where the next part goes. I want to tick it off and not lose my place when I put the iron down. InteractiveHtmlBom does this as a KiCad plugin. This page does the same job from the .kicad_pcb, in the browser, without installing anything. It also tells me which bin each part is in.

How to use it

  1. Open the board’s .kicad_pcb (KiCad 6–9), or drop it on the page. The sample is my 4-layer sensor board. A board you opened in the board viewer opens here too, and Board viewer → takes it back.

  2. The BOM groups parts with the same value and footprint (10k, 10K and 10000 group for resistors, capacitors and inductors), in InteractiveHtmlBom’s order: capacitors, resistors, inductors, diodes, ICs, crystals … connectors last. Parts marked exclude from BOM in KiCad (mounting holes, fiducials, jumpers) are left out. One row per part ungroups the rows.

  3. DNP parts (KiCad 8’s Do not populate, or a value or DNP field saying so) get rows of their own, greyed and struck through. Show them, hide them, or list only them. They do not count towards progress.

  4. Click a row and its parts light up on the front and back drawings. Click a part on a drawing to find its row. Front / Back / Both limits the rows and the drawings to one side. The back is drawn as seen from underneath. Parts on the other side are faded.

  5. Tick each row sourced (you have the parts out) and placed. A row is ticked when all its parts are. Ticking it ticks every part on it, and it shows half-ticked when some are. Placed parts' pads turn grey on the drawings. The bar counts placed parts out of the fitted ones.

  6. Keys: ↑ ↓ (or J K) move through the rows, Space marks the row placed and moves to the next one, S marks it sourced, F / B / A show the front, back or both, Esc clears the selection.

  7. Stock and bins: with Stock and bins from my Parts inventory ticked, each row shows how many you have and where, read from Parts inventory in this browser. It matches by the footprint’s MPN or supplier part number fields (from the schematic), or for passives by value and package. It only reads the inventory.

  8. Save as HTML writes one self-contained page with the drawings, the BOM, your ticks so far and the stock column. It has no links to this site and needs no network, so you can keep it with the project or open it on a bench laptop. Its ticks are kept by the browser that opens it.

Progress is kept per board in this browser. A board saved again with the same parts keeps its ticks. Clear ticks starts again.

Works in current Chrome, Edge, Firefox and Safari, on desktop, tablet and phone.

Limits

  • The drawings show the board outline, silkscreen, fab layer, pads and (if you tick it) tracks. Zones and inner layers are left out to keep the view clear. The board viewer draws everything.

  • The BOM comes from the board’s footprints, so fields that exist only in the schematic are missing. KiCad copies symbol fields onto footprints when you update the PCB from the schematic. For a BOM with stock shortfalls and prices, use the KiCad BOM rollup on the schematic.

  • KiCad 9 design variants are not modelled. DNP is per footprint.

  • Text on the drawings is a system font, not KiCad’s.

Related: reflow profile, SMD marking codes, SMD packages, label maker (labels for the bins).

Privacy

The board is read from your file in the browser and kept only in this browser (IndexedDB, shared with the board viewer). Your ticks are kept in localStorage. Parts inventory is read from this browser’s storage and never changed. Nothing is uploaded, and the saved HTML page makes no network requests.

Linking to an example

Share link copies a URL with the view settings (side, DNP mode, grouping, tracks). It never includes the board or your ticks, so a link opens on the sample.

Parameter Meaning

example

A preset (below)

side

FB both, F front, B back

dnp

show, hide, only

group

vf value + footprint, none one row per part

tracks

true / false

Presets: the sample board · back side only · one row per part, DNP hidden.

Runs entirely in your browser; nothing you type leaves this page.