Technology Stack

​

Core Technologies

​

React 18.3.1

• Component-based architecture for UI modularity
• Efficient rendering with Virtual DOM
• Strong ecosystem and TypeScript support
• Excellent developer experience with hot reload

​

TypeScript 5.6.2

• Target: ES2020
• Strict mode enabled
• JSX: react-jsx (automatic runtime)
• Module resolution: bundler (Vite-optimized)

• Catch bugs at compile time
• Better IDE support with IntelliSense
• Self-documenting code with type annotations
• Safer refactoring

​

Vite 6.0.0

• Instant server start with native ES modules
• Lightning-fast Hot Module Replacement (HMR)
• Optimized production builds with Rollup
• Out-of-the-box TypeScript support
• Excellent PWA integration

​

State Management

​

Zustand 5.0.0

• Simple API with minimal boilerplate
• No providers or context required
• Built-in middleware support (undo/redo)
• Excellent TypeScript inference
• Small bundle size (~1KB)
• Easy to implement time-travel debugging

​

3D Graphics & Geometry

​

Three.js 0.170.0

• Industry-standard for web 3D rendering
• Rich API for cameras, lights, materials
• Built-in OrbitControls for camera manipulation
• Efficient rendering pipeline
• PBR (Physically Based Rendering) materials

​

Manifold 3D 3.3.2

• Guaranteed manifold (watertight) meshes
• Fast boolean operations (union, difference, intersection)
• Runs in WebAssembly for near-native performance
• Perfect for generating 3D-printable geometry
• Produces clean, valid meshes for export

// Example CSG workflow
outer_shell = box.rounded()
inner_cavity = box.scaled()
bin = outer_shell.subtract(inner_cavity)
bin = bin.union(base_profile)
bin = bin.subtract(magnet_holes)

​

File Handling

​

JSZip 3.10.1

• Required for 3MF export (3MF is a ZIP-based format)
• Pure JavaScript, works entirely client-side
• Supports both text and binary content
• Implements OPC (Open Packaging Conventions)

• Packages 3MF XML files
• Bundles multiple objects in one archive
• Creates valid OPC-compliant 3MF files

​

UUID 11.0.0

• Unique bin IDs for reliable tracking
• Collision-free object identification
• Required for 3MF object referencing

​

Styling

​

Tailwind CSS 4.0.0

• Rapid UI development with utility classes
• Consistent design system
• Automatic purging of unused CSS
• Dark mode support
• Responsive design utilities
• Small production bundle size

​

Build & Development

​

Vite Plugins

​

PWA Configuration

• Service Worker generation
• Offline asset caching
• Installable app experience
• Background updates

• Caches JS, CSS, HTML, WASM, fonts
• 10MB maximum file size
• Runtime caching for Google Fonts
• Manual update prompts (no automatic reload)

​

TypeScript Types

​

Dependencies Summary

​

Runtime Dependencies

{
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "zustand": "^5.0.0",
  "three": "^0.170.0",
  "@types/three": "^0.170.0",
  "manifold-3d": "^3.3.2",
  "jszip": "^3.10.1",
  "uuid": "^11.0.0"
}

​

Development Dependencies

{
  "typescript": "~5.6.2",
  "vite": "^6.0.0",
  "@vitejs/plugin-react": "^4.3.4",
  "tailwindcss": "^4.0.0",
  "@tailwindcss/vite": "^4.0.0",
  "vite-plugin-pwa": "^1.2.0",
  "@types/react": "^18.3.12",
  "@types/react-dom": "^18.3.1",
  "@types/uuid": "^10.0.0"
}

​

Architecture Decisions

​

Why Client-Side Only?

• No server required = easier deployment
• User data never leaves their device (privacy)
• Works offline after first load
• Reduced hosting costs
• WASM enables near-native performance in the browser

​

Why Web Workers?

• Keep UI responsive during heavy CSG operations
• Prevent blocking the main thread
• Enable background geometry generation
• Better perceived performance

​

Why Manifold over other CSG libraries?

• vs OpenJSCAD: Faster, guaranteed manifold output
• vs Three.js CSG: More reliable, cleaner meshes
• vs server-side CAD: No network latency, works offline

​

Performance Characteristics