Gridfinity Label Generator

Web generator: https://cnckitchen.github.io/gridfinityLabelGenerator/

A browser-based tool that generates custom STL labels for Gridfinity bins. Everything runs entirely in the browser — no server or install required for the deployed version.

What it does

The generator composites a base label STL with embossed text and clipart icons, then exports the result as a ready-to-slice .stl file. Labels are designed for a single 1× Gridfinity tile but can be scaled to 2× or 3× width.

Each label consists of:

• Icon (left side): one of 10 clipart symbols (hex, nut, nylock, washer, large washer, lock washer, insert, torx, phillips, slot)
• Line 1 (top right): text, auto-sized to fill the available box
• Line 2 (bottom right): text, or one of 10 technical screw-profile images (button head, countersunk, cylinder head, grub screw, hex head, low head, pan head, and self-tapping variants)
• Emboss depth: 0.4 mm — matches a single layer at 0.4 mm layer height, ideal for colour-change printing

Modes

Custom label

Enter your own text and pick an icon. Exports a single .stl.

Predefined labels

Select from a curated catalogue of CNC Kitchen fasteners and inserts. Exporting one label gives an .stl; exporting multiple gives a .zip with one file per label.

Categories:

• Heat inserts — metric (M2–M10) and imperial (#2-56–3/8″-16), various lengths
• Socket head cap screws — M1.6–M5, lengths from 3–45 mm, each labelled with its Torx drive size (TX5–TX25)
• Hex nuts — M2–M8
• Nylock nuts — M2–M8
• Standard washers — M2–M8
• Large washers — M2–M8

Printing tips

• Layer height: 0.2 mm
• Colour change: in layer 3 (so the embossed text prints in a contrasting colour)
• Wall generator: Arachne recommended for sharper detail on thin strokes

How it works

STL generation runs entirely in the browser using Three.js:

1. Loads GridfinityBinLabel.stl as the base geometry
2. Parses SVG clipart with SVGLoader, extrudes to 3D and scales it into the icon box
3. Generates font glyphs from helvetiker_bold.typeface.json using a custom tracking function (tighter letter spacing so the auto-sizer chooses a larger font size, keeping strokes thicker and more slicer-friendly)
4. Extrudes all text and icon shapes to 0.4 mm depth and positions them on the label surface
5. For 2× or 3× wide labels, widens the base geometry and centres the content accordingly
6. Exports the combined mesh as a binary STL via STLExporter

Project structure

web/      React + Vite front-end — this is what gets deployed
server/   Express API with equivalent server-side STL generation (not used by the deployed site)

Run locally

cd web
npm install
npm run dev

Opens at http://localhost:5173. No backend needed — all generation happens in-browser.

Build

cd web
npm run build

Output goes to web/dist/. The base: "./" setting in vite.config.ts ensures assets use relative paths, so the build works on GitHub Pages and any subdirectory host.

License

This project is licensed under the MIT License.

The base label geometry (GridfinityBinLabel.stl) is derived from pred's parametric Gridfinity bin on Printables, which carries its own license terms.