Parametric Gridfinity Generator is a browser-based design tool for creating printable Gridfinity bins and baseplates without opening a desktop CAD application. The project focuses on the practical task that comes before printing: turning a desired storage layout, drawer size, or printer-bed limit into model files with dimensions that are easy to understand and use. It is designed as a static website, so the complete application can be hosted on GitHub Pages and run directly in a modern browser.
The generator uses the common Gridfinity 42 mm grid pitch and 7 mm height unit. It also uses the familiar 0.5 mm overall block spacing convention and a stepped mating profile based on dimensions documented by community parametric implementations. The goal is to make common storage-layout work fast: choose a bin size or describe the available drawer area, inspect the calculated result, and download STL output.
A major part of the project is the drawer workflow. Real drawers rarely match an exact number of 42 mm units. Instead of making the user calculate the layout by hand, the tool determines how many complete grid cells fit, reports the used area, and shows the remaining margins. The printer-bed workflow then checks whether the complete baseplate fits on the selected build area. If it does not, the layout is automatically divided along grid boundaries and the generated STL parts are packaged in one ZIP file.
The application provides two main generators. The Bin generator creates a parametric storage bin from Gridfinity width, depth, and height units. Users can adjust wall thickness, divide the interior into multiple X and Y compartments, enable a stacking lip, and add a label tab. A live isometric preview and exact overall dimensions update as the controls change.
The Baseplate generator supports two input methods. Grid Size mode accepts a direct number of columns and rows. Drawer Size mode accepts the internal drawer width and depth in millimeters, calculates the largest whole Gridfinity layout that fits, and reports the centered side and front/back margins. Both modes include printer width and printer depth inputs. The application calculates the largest grid-aligned piece that fits the build plate and automatically determines the required number of printable pieces.
Standard, lightweight, and skeleton baseplate styles are available. Model generation happens in JavaScript in the browser. A single model downloads as an STL file. Multi-part baseplates download as a ZIP containing separate STL files named by row, column, and grid size.
Open the website and choose Bin or Baseplate at the top of the tool.
For a bin, enter the number of Gridfinity units for width and depth, choose the height in 7 mm units, then adjust wall thickness and compartment divisions. Enable or disable the stacking lip and label tab as needed. The preview and result bar immediately show the generated footprint and height. Select Download STL to create the model locally and save it to your device.
For a baseplate, choose Grid size when you already know the required column and row count. Choose Drawer size when you know the internal dimensions of the drawer or storage area. In Drawer Size mode, enter the width and depth in millimeters. The result shows the fitted grid dimensions and the leftover centered margins.
Enter the usable X and Y dimensions of the printer bed. If the entire baseplate fits, the download action produces one STL. If the layout is larger than the printer bed, the result shows the number of pieces and the button downloads a ZIP containing all grid-aligned parts. Import the STL files into your slicer, apply your normal material and print settings, and arrange the pieces on the build plate.
The main generated model format is ASCII STL, which is widely supported by desktop 3D-printing slicers and model inspection tools. When a baseplate requires more than one printable section, the application creates a standard ZIP archive containing one STL file for each section. The ZIP writer uses stored entries, so no external compression library is required.
Inputs are numeric values entered directly in the browser. Grid dimensions use whole Gridfinity units, physical drawer and printer dimensions use millimeters, and bin height uses Gridfinity 7 mm units. No proprietary project file is required to use the generator.
This repository intentionally uses plain HTML, CSS, and JavaScript. There is no framework, package dependency, server runtime, or required build command. Geometry code is separated from user-interface code so calculation and file-generation behavior can be tested independently.
js/gridfinity.js contains Gridfinity constants, drawer fitting, printer split calculation, and parametric bin/baseplate model construction. js/geometry.js provides triangle meshes, rectangular solids, frame primitives, rounded rectangular lofts, bounds calculation, normal calculation, and ASCII STL serialization. js/zip.js implements a small ZIP writer with CRC-32 values and central-directory records. js/preview.js renders a lightweight SVG isometric preview without loading WebGL or third-party libraries. js/app.js connects controls, validation, result summaries, downloads, and PWA registration.
The project includes automated tests using the Node.js built-in test runner. Tests cover the 42 mm grid constant, drawer-fit math, print-bed splitting, generated model bounds, STL structure, ZIP signatures, required SEO markup, responsive UI requirements, PWA configuration, documentation structure, and repository configuration.
The Progressive Web App uses manifest.json and service-worker.js. The service worker precaches the complete first-party runtime application shell. During later visits it uses a network-first strategy: it requests the current file from the server, updates the cache after a successful response, and uses the cached version when the network request fails. This keeps normal visits current while preserving offline fallback after the site has been loaded successfully once.
parametric-gridfinity-generator/
├── index.html
├── styles.css
├── manifest.json
├── service-worker.js
├── repo.config.json
├── README.md
├── assets/
│ └── icons/
│ ├── icon.svg
│ ├── favicon-32.png
│ ├── icon-192.png
│ └── icon-512.png
├── js/
│ ├── app.js
│ ├── geometry.js
│ ├── gridfinity.js
│ ├── preview.js
│ └── zip.js
├── tests/
│ ├── gridfinity.test.mjs
│ └── static.test.mjs
└── docs/
└── superpowers/
The project can be deployed directly to GitHub Pages from the repository root because it is already composed of static files. Create the repository named parametric-gridfinity-generator, push the files to the main branch, open the repository settings, and configure GitHub Pages to publish from the desired branch and root folder. No npm run build step is required.
For local testing, serve the repository over HTTP rather than opening index.html with a file:// URL. For example, run python3 -m http.server 8080 in the project directory and open http://localhost:8080/. A local HTTP origin is also useful when testing the service worker because service workers require a supported secure or local development context.
Automated tests can be run with:
node --experimental-default-type=module --test tests/*.test.mjsRepository name: parametric-gridfinity-generator
GitHub repository: https://github.com/yeshan-jun/parametric-gridfinity-generator
GitHub Pages site: https://yeshan-jun.github.io/parametric-gridfinity-generator/
The repository is intended to stay small and easy to audit. All runtime code is first-party source included in the project, so deployment does not depend on a CDN, JavaScript package registry, external font service, or model-generation API.
Model parameters and STL generation are processed locally in the browser. The core generator does not require an account, file upload, cloud CAD service, remote geometry API, or project database. Values entered into the controls are used by the page to calculate dimensions and create model data in the current browser session. Generated STL and ZIP content is created locally and is downloaded through browser object URLs.
This project is released under the MIT License.
The implementation is informed by public Gridfinity dimensions and established parametric projects. Useful references include the Gridfinity unofficial specification, the Gridfinity Rebuilt OpenSCAD project, and Gridfinity CADQuery implementations that document the 42 mm grid, block spacing, mating depth, and related profile constants.
https://github.com/gridfinity-unofficial/specificationhttps://github.com/kennetek/gridfinity-rebuilt-openscadhttps://github.com/kmeisthax/gridfinity-cadqueryhttps://gridfinity.xyz/