Parametric tools for 3D printing that run in your browser. Dial in a part, watch it appear in 3D, download an STL or 3MF, print.
No server. No account. No queue. Just real CSG running on your machine.
Status: beta, v1.9.0. The version is shown on the site next to the logo; changes are listed in CHANGELOG.md.
Gridfinity is an open standard, and I believe the tools for it should be free too: no accounts, no paywalls, nothing to install. Everything runs in your browser. The other tools here (keychains, rack parts, photo cutouts) are things I make for myself and use myself, and I am simply sharing them.
PrintKit is a set of products, each with its own modes. Every mode has a live 3D preview, remembers your settings, works in millimetres or inches, and exports binary STL or 3MF (with Bambu printer presets).
| Product | Modes |
|---|---|
| Gridfinity Master | Box (bin or tray with lip, scoop, dividers, magnets and screws), Baseplate (any grid, fractional cells, split to fit your bed, connectors, magnets and screws), Cutout (pockets shaped to your tools: traced from a photo on a sheet of paper, from an imported STL, or a simple circle or rectangle) |
| Keychain Master | Image (a picture becomes a silhouette with a relief, patterns, text, ring mount, two printable halves with pins), Shape (a ready-made shape with a rim, the same patterns, text and mounts) |
| Rack Master | Panel (10-inch rack panel of 1–10 U with standard ear holes, Skadis, hexagon, pills, lines and Kumiko patterns, optional separate back wall), Enclosure (front plate with ears and a shell around a device, with window, keystone sockets, holes and vents), Shelf (front plate with ears, a ventilated floor and sloped side walls) |
Highlights:
- Live 3D preview. Change a number and the part rebuilds in a fraction of a second. Orbit it, zoom it, look underneath.
- Real solid geometry. The parts are built with the manifold CSG kernel compiled to WebAssembly, in a web worker, so the page stays responsive.
- Print-ready export. Printer bed overlay, parts laid out on plates, separate objects in 3MF.
- Remembers you. Settings persist in
localStorage, per mode; units and language are shared. - English and Russian, millimetres and inches.
The app has no server and no account: your settings, photos and files stay in your browser (in localStorage and IndexedDB) and are never uploaded. The optional AI models for photo cutouts and keychain reliefs are downloaded to your machine and run locally; pictures never leave it.
The only exception is an anonymous visit counter (Yandex Metrika, id in src/app/site.ts). It starts only after you accept it in the consent banner; decline and nothing is ever sent. Everything else — models, exports, photo processing — works fully offline after the page and the optional models are loaded.
npm install
npm run devOpen the URL Vite prints, tweak, export.
| Command | What it does |
|---|---|
npm run dev |
Vite dev server with hot reload |
npm run build |
Type check, then production build into dist/ |
npm test |
All tests (vitest) |
npm run art |
Regenerate the start page illustrations (see CLAUDE.md) |
The app is a static site, so it deploys as plain files. Two workflows handle verification and publishing:
- Pull requests:
.github/workflows/ci.ymlrunsnpm ci,npm testandnpm run buildonce per PR update. - Push to
mainor manual run:.github/workflows/pages.ymlruns the same checks, then publishesdist/to GitHub Pages frommain. If tests or the build fail, nothing is published.
One-time setup: in the repository open Settings → Pages and set Source to GitHub Actions. After the first successful run on main the URL appears in the run summary and under Settings → Pages. A custom domain can be set on the same page.
The build uses relative asset URLs (base: './') and hash routes (/#/gridfinity/baseplate), so it works from any subpath and a deep link opens that mode directly. Node 24 or newer is required (engines in package.json, node-version: 24 in the workflow).
Renaming the repository is safe: GitHub redirects the old address, the Pages custom domain stays, and nothing in the build depends on the repository name. After a rename run git remote set-url origin [email protected]:<user>/<new-name>.git and update GITHUB_URL in src/app/site.ts.
params (React state, one per mode)
│
▼
geometry/*.ts ──► manifold-3d (WASM CSG, web worker) ──► parts (typed arrays)
│
┌───────────────────────┴───────────────┐
▼ ▼
Viewport.tsx export/ (STL, 3MF)
(three.js preview)
- Geometry is React-free and built from small profile and shape helpers that follow the standards (for Gridfinity: the 42 mm pitch, chamfers, 1.8 mm wall, 4 mm top radius, clearances).
- The worker returns plain typed arrays; the preview and the exporter read the same data, so they cannot disagree.
- The start page illustrations are pre-rendered from the real parts by a build script (
npm run art), so the start page needs no WebGL.
src/
├── app/ # entry, hash router, shell, start pages, theme tokens, site config
├── ui/ # generic controls (NumberField, LengthField, Section, …) and units
├── features/ # one folder per mode (baseplate, box, cutout, keychain, rack, …) and the viewport
├── geometry/ # all the CSG (manifold-3d), React-free
├── export/ # STL and 3MF, plate layout, printer presets
├── ml/ # optional in-browser neural networks (WebGPU / WASM runtime)
├── data/ # static data (printer presets)
└── i18n/ # en / ru translations
design/ # visual design: brief, theme reference, artboards
openspec/ # numbered change proposals, specs and the roadmap
poc/ # proof-of-concept experiments (AI segmentation, keystone measurements)
scripts/ # build scripts (start page art, evaluation helpers)
Work is planned as numbered OpenSpec changes in openspec/changes/ (order and dependencies in openspec/ROADMAP.md); CLAUDE.md describes the conventions.
- The build order and dependencies of planned work:
openspec/ROADMAP.md - Released versions and what each brought:
CHANGELOG.md
Standing on the shoulders of:
- Gridfinity: the modular storage system by Zack Freedman and its community
- gridfinitygenerator.com: the three Gridfinity modes and the set of parameters
- gridfinity-studio: 3MF export and Bambu presets
- tooltrace.ai and aiprintgen.ru Gridfinity generator: the photo-to-organiser flow (photo of tools on a sheet of paper, perspective alignment, silhouettes, a bin with fitted pockets)
- Customizable vent blank panels for 10-inch rack (MakerWorld, Kiwiworks): rack panel patterns and options
- 10 inch mini-rack generator (MakerWorld, spuder): enclosure options
- IKEA SKÅDIS pegboard: the slot layout of the Skadis panel pattern
- 19 inch vs 10 inch rack dimensions (Wikimedia Commons): standard 10-inch rack dimensions
- Keystone blank and Keystone for other models (MakerWorld): reference models for the keystone jack mount of the rack enclosure; only their dimensions were measured, no geometry is copied
- openscad-agent: an agent-driven workflow for printable models, an inspiration for building this with an AI agent
- manifold: the geometry kernel; three.js: the preview
- ONNX Runtime Web (MIT): runs the optional neural networks in the browser
The photo-to-cutout flow can use a neural network to find the tools on the sheet. The classic detector stays the default and needs no download. A model is downloaded only after you confirm it in the AI models window, is checked against a pinned SHA-256 and runs in your browser: photos are never uploaded. Only permissive licences are offered.
- BiRefNet-lite 512 (fp16) (MIT): the recommended model
- ISNet general (fp16) (MIT): fast, needs WebGPU
- ISNet general (int8) (Apache-2.0): light
- InSPyReNet SwinB (fp16) (MIT): accurate, needs WebGPU
- Depth Anything V2 Small (Apache-2.0): the depth map for the keychain photo relief, two files (graph and weights)
MIT. Print it, remix it, ship it.