2D/3D Floor Planner
A best-in-class TypeScript boilerplate for designing interior floor plans with matched 2D and 3D views of the same scene — built on React, Three.js, Zustand, and Zod — so you can build at the speed of thought with AI, ship an accurate planner, and rank #1 on Google.
Features
- 🧱 One typed scene, two views — a single source-of-truth JSON scene drives both the 2D plan and the 3D model, so they can never drift
- 🪚 Cabinet CAD → CNC cut files — a standalone
/cad/workspace turns one typed cabinet definition into a 3D drawing, CNC-ready DXF cut sheets, and GRBL G-code for every board, all derived from the same data - 🧭 Multi-page app — a built-in page menu hops between the Floor Plan and the Cabinet CAD workspace; Vite bundles both pages in one build
- 📐 Precise dimensions — all linear values stored in inches; imperial (
ft / in) display by default with anintoggle - ⚛️ React 18 + TypeScript with strict typing end-to-end
- 🧊 Three.js via
@react-three/fiber+@react-three/dreifor the 3D view - ✏️ Plain SVG 2D floor plan — crisp at any zoom, fully measured
- 🗂️ Edit one file — describe your whole space in
src/design/home.ts; an edge/bounds authoring DSL keeps the math out of your way - 🛡️ Zod-validated scene contract — bad layouts surface as clear errors instead of broken renders
- 🎯 Click-to-select any wall, opening, room, or fixture in either view, with a shared tooltip showing labels and dimensions
- 🧭 Live compass that stays north-up in 2D and tracks the camera in 3D
- 🤖 AI-friendly codebase structure with TypeScript strict mode
- 🔍 SEO and AI optimized with meta tags, Open Graph, and Twitter cards
- ⚡ Vite for instant hot reload and lightning-fast production builds
- 🏠 Starter home included so the project runs out of the box
Explore
Browse the full source of the 2D/3D Floor Planner project.