Web tool

OpenGrid Calculator

Full-Stack Development

OpenGrid Calculator
Click to expand

Status

Live

Role

Full-Stack Development

Stack

ReactTypeScriptViteZustandTailwindCSSSupabase

A web-based tool for planning and optimizing multi-zone OpenGrid tile layouts for 3D printing. Define your surface zones, pick your printer, and get optimized tile placement with print-time estimates and a ready-to-use print list.

The Project

OpenGrid is a modular grid system compatible with Gridfinity, and planning tile layouts across multiple surface zones by hand is tedious and error-prone. This calculator automates the entire process -- from tile sizing constrained to your specific printer bed, to print-time estimation and connector counts.

Key Features

  • Multi-zone surfaces -- define multiple zones with independent width and depth, add gaps between them
  • Printer-aware optimization -- select your 3D printer profile (BambuLab, Prusa, Ender, generic) and get tile sizes constrained to your bed
  • Regular and Lite tiles -- toggle between standard (6.8mm) and lite (4mm) tile types
  • Inventory tracking -- enter tiles you already own to reduce what needs printing
  • Visual preview -- interactive SVG canvas showing exact tile placement per zone
  • Print list export -- CSV download or clipboard copy of all tiles and connectors needed
  • Save and share -- sign in to save configurations and share them via link
  • mm/inch toggle -- work in your preferred unit system

Tech Stack

Built with React 19 and TypeScript on Vite, using Zustand for state management and Tailwind CSS for styling. Auth and data persistence are handled by Supabase (email/password auth with Postgres storage). Hosted as a static site on Render with client-side routing.

How It Works

The layout engine evaluates tile combinations that fit within each zone's dimensions and your printer's bed size, then ranks them by coverage percentage. The recommended layouts panel shows the top options, and selecting one instantly updates the visual preview, tile breakdown, and print list. Connectors are calculated automatically based on the Multiconnect spec.

Tags

3D PrintingOpen SourceUX