2D/3D Floor Planner

Just chat with AI inside your code editor using our Gallop templates, and you will never want to wrestle with a heavyweight CAD suite, a bloated drag-and-drop room designer, or a proprietary file format again. Simply describe the space you want, and AI writes the code. No SketchUp, no AutoCAD, no visual editors, and no design limitations. Just type and watch. Lay out rooms and walls, place windows, doors, cabinets and appliances, toggle between accurate 2D and 3D views, configure your SEO and AI discoverability instantly, expand endlessly, and get prompting tips from our Gallop community. Go live in minutes.

---

• 🧱 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 an in toggle
• ⚛️ React 18 + TypeScript with strict typing end-to-end
• 🧊 Three.js via @react-three/fiber + @react-three/drei for 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

---

Beyond the floor planner, the template ships a second, standalone page at /cad/ for taking a single cabinet all the way to the shop. Open it from the page menu in the top-left of the toolbar (or visit http://localhost:5173/cad/ directly).

Each cabinet is described once as a typed definition (cad/cabinets/*.ts). From that one source of truth the page generates:

• 🧊 A 3D drawing — every part rendered as its assembled box, with an explode slider, dimension callouts, per-part cut sizes, and a toggleable layer/legend.
• 📄 DXF cut sheets — true finished part outlines nested onto each board (one per material thickness), ready to import into your CAM software. Drag a .dxf back onto the canvas to inspect it.
• ⚙️ GRBL G-code — ready-to-run toolpaths per board for a BobsCNC KL744 (1/4" bit): pockets first while parts are still captive, then outside profiles with holding tabs. Includes a separate wasteboard-surfacing program.

Two build variants ship as worked examples — upper18 (CNC face-frame upper on 48×48 boards) and upper18saw (the same cabinet as straight saw cuts on 4×8 sheets).

Machine-safety audit: because bad G-code breaks bits and gouges stock, every generated job is checked by npm run audit:gcode — it flags un-parseable lines, plunges into stock, travel below safe height, cuts deeper than the material, out-of-bounds moves, and more, and confirms every toolpath lands exactly on the 3D plan.

---