Skip to main content
Gridfinity Builder is a browser-based parametric CAD tool built with modern web technologies. The application uses a reactive state management system and offloads heavy geometry computation to Web Workers for optimal performance.

Project Structure

The codebase follows a modular architecture with clear separation of concerns:

Component Architecture

The main application layout is defined in App.tsx:47-85, which orchestrates the view hierarchy:
1

Toolbar

Top navigation bar providing view mode controls (2D, 3D, split), camera presets, and export buttons
2

Sidebar

Left panel containing bin presets, active bin list, bill of materials, and utility tools (auto-fill, optimize, print labels)
3

Canvas Area

Dynamic split view that can show:
  • 2D Mode: Interactive SVG grid (GridCanvas2D)
  • 3D Mode: Three.js viewport (Viewport3D)
  • Split Mode: Both views side-by-side with draggable divider
The split view implements a custom resize handler (App.tsx:15-44) that allows users to adjust the viewport ratio by dragging the divider.

State Management with Zustand

Gridfinity Builder uses Zustand for centralized state management. The store (store/useStore.ts) manages:
  • Bin Collection: Array of bin configurations with unique IDs
  • Grid Settings: Baseplate dimensions, printer presets
  • View State: Active view mode, selected bin, camera settings
  • History: Undo/redo stack for user actions
Components consume state using Zustand selectors for optimal re-rendering:
App.tsx:9
This pattern ensures that components only re-render when their specific slice of state changes, maintaining smooth performance even with complex 3D scenes.

Data Flow

The application follows a unidirectional data flow:
  1. User Input → Component event handlers
  2. State Update → Zustand store mutation
  3. Reactive Listeners → Components observe state changes
  4. Side Effects → Geometry regeneration triggered via Web Worker
  5. View Update → 2D/3D viewports reflect new state

Technology Stack

Performance Characteristics

  • Client-Side Only: All computation runs in the browser, no server required
  • Offline-First: PWA architecture with Service Worker caching
  • Non-Blocking: Heavy CSG operations run in Web Worker threads
  • Cached Geometry: Mesh results cached by configuration hash to avoid redundant computation
  • Transferable Objects: Mesh buffers transferred between worker and main thread with zero-copy semantics