Plan and design Gridfinity drawer organizer layouts for 3D printing — right in your browser.
Live: gridfinitylayouttool.com
- Layout Planner — Drag-and-drop bin placement with multi-layer support
- 3D Preview — Isometric visualization of your drawer layout
- Bin Designer — Parametric 3D bin generator with STL export
- Print List — Optimized print list with filament, time, and cost estimates
- Inspiration Gallery — Browse curated example layouts across workshop, kitchen, office, hobby, and personal themes
- Cloud Sharing — Share layouts via link with optional real-time collaboration
- PWA — Installable, works offline
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript | Type safety |
| Zustand | State management |
| Three.js | 3D visualization |
| brepjs | Parametric 3D geometry & STL export (OpenCascade WASM) |
| Tailwind CSS 4 | Styling |
| Vitest | Unit testing |
| Playwright | End-to-end testing |
| Vercel | Hosting & serverless API |
Requires Node.js 20+ and pnpm 10+. Use nvm use to switch to the correct version (requires nvm).
git clone https://github.com/andymai/gridfinity-layout-tool.git
cd gridfinity-layout-tool
nvm use
pnpm install
pnpm run dev # Development server at localhost:5173
pnpm run build # Production build
pnpm run test:coverage # Unit tests with coverage
pnpm run test:e2e # Playwright end-to-end testsThis project is open source but not open contribution — see CONTRIBUTING.md for details on bug reports, feature requests, and the pull request policy.
GNU Affero General Public License v3.0 — see the LICENSE file for details.
