← Work
Web Apps 2026

GridBox3D

N/A

Gridbox3D is a browser-based drawer tray designer for 3D printing. Set outer dimensions in metric or imperial, split compartments bento-style (splits stay scoped to each region), tune wall thickness and corner fillets, then download a print-ready STL—no account, no desktop CAD.

Role
Lead Engineer
Timeline
2 days
Stack
Angular TypeScript manifold-3d SCSS Vitest CircleCI
GridBox3D

Overview

I built Gridbox3D to solve a narrow but recurring problem: custom drawer organizers are easy to imagine and painful to model. Most people either buy fixed grids or spend time in full CAD for a simple tray with a few dividers.

The app keeps the workflow shallow—outer size, recursive splits on the plan view, optional snap-to-grid, then one-click STL export generated entirely in the browser. The same partition tree drives the interactive editor and the solid mesh, so what you see in the canvas is what you print.

  • Metric and imperial inputs with live inner/outer dimension readouts
  • Bento-style splits: add, drag, or remove dividers per compartment only
  • Shared fillet control for outer corners and divider junctions
  • Client-side STL via Manifold 3D (no server-side geometry)

You can view GridBox3D here: gridbox3d.com

Why it's notable

It compresses parametric CAD into a single-purpose tool: nested partitions, filleted junctions, and watertight export without leaving the browser. The hard part is keeping the 2D editor, partition constraints, and 3D boolean mesh in sync—including orientation fixes so the STL matches the on-screen layout in common slicers.

Unique challenges

Scoped partition tree

Splits are recursive, not a flat row/column grid. Each divider only affects its parent region, so bounds, minimum compartment sizes, and delete/merge behavior have to stay consistent while users drag dividers or remove cells.

2D preview ↔ 3D solid

The plan view uses per-corner fillet radii at cavity edges and divider junctions. The STL builder unions a hollow shell with full-height partition plates and applies the same radius logic—then mirrors and rotates the solid so exported axes match typical slicer beds.

In-browser mesh generation

STL export loads Manifold WASM in the client, builds the solid from the live design state, and streams a binary file. Fillet caps depend on wall thickness and smallest leaf span, so the UI clamps inputs before export fails in the mesh kernel.