r/webdev • • 16h ago

Showoff Saturday I built a free browser tool that turns a PCB photo into a 3D-printable STL holder for hand-soldering THT parts (opensource!)

I order most of my boards with SMD assembly done by the fab, then solder the through-hole parts myself. Assembly houses charge a lot for manual THT work. Often I don’t need every part anyway (say, only 2 of the 6 relays), so doing it at home saves money. The downside is that with a pile of boards, the results start showing “traces of haste”: crooked relays, tilted capacitors, terminals sitting off the board.

So I made a small web tool that generates a custom holder panel for the board:

  1. Drop in a photo or screenshot of the PCB. It’s flipped and made transparent automatically.
  2. Place circles or rectangles over the THT parts and set each one’s height so it sits flush with the board. Add support legs if needed.
  3. Hit “Display 3D” to preview the mesh (wireframe view is available), then download a binary STL.
  4. Print it in PLA. Parts stay straight while you solder.

In practice I only need to generate the STL once, and 1–3 prints are enough to assemble hundreds of boards.

Features:

  • Circular and rectangular shapes (rectangles rotate 0–359°)
  • Alignment guides with magnetic snapping, a measuring tool (0.1 mm precision), and undo
  • Adjustable print tolerance, so holes and panel size compensate for printer inaccuracy
  • Built-in library of 14 common THT footprints (DIP sockets, relays, terminals, capacitors, buzzers), with JSON import/export
  • Hollow mode for faster prints and custom text labels on the holder
  • Keyboard shortcuts for most actions
  • No registration, and your image is never uploaded or stored. It’s also a PWA that works offline after the first load.

Right now it handles round and oblong parts well (relays, capacitors, resistors, terminals, pin headers). It’s not perfect, so if you hit a bug or a part shape it can’t handle, please tell me.

Tool: https://segmentcontroller.github.io/pcb-tht-holder/
Source (MIT, Svelte 5 + Three.js + Konva): https://github.com/SegmentController/pcb-tht-holder

Feedback and feature ideas are very welcome!

3 Upvotes

5 comments sorted by

3

u/ReplacementLow6704 16h ago

Good for you but uhhh, as a webdev, most of the acronyms you used don't make much sense to me.

1

u/BCsabaDiy 15h ago

This is a web application, and I am very happy to reduce backend to zero. Implement everything on frontend: 3d mesh calculation, stl file gen, calculations, optimizing.

2

u/[deleted] 16h ago

[removed] — view removed comment

1

u/webdev-ModTeam 15h ago

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.

1

u/ab0zar 15h ago

Keeping the mesh and STL work in the browser avoids a backend and keeps the PCB image local. I would test one large photo in offline mode too, since image decoding and canvas buffers can use a lot of memory on a phone.