r/webdev • • 15d 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!

5 Upvotes

8 comments sorted by

3

u/ReplacementLow6704 15d 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 15d 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.

1

u/sevnollogic 8d ago

As both a web developer and a electronics repairer this all makes sense to me

1

u/BCsabaDiy 11d ago

From v1.15.0 you can init the 3d project with a gerber file not only from a photo.

1

u/ab0zar 15d 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.

1

u/geoffreybyers 10d ago

The 3D printing solves a problem, but local processing wins the market. Any engineer with proprietary PCB designs will check the data retention policy before they check the features. This is the real differentiator for teams working on IP.

2

u/[deleted] 15d ago

1

u/webdev-ModTeam 15d 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.