Floorplan Builder (TypeScript)

This is the TypeScript conversion of the current floorplan prototype.

What changed

• moved from a single app.js file to a typed Vite + TypeScript project
• split the app into small modules for constants, state, types, and utilities
• kept the current behavior the same so we can keep iterating without changing the design direction too fast

Current features

• 2D / 3D toggle
• snap grid slider with 1 ft, 1/2 ft, 1/4 ft, and 1/8 ft
• draggable rectangular room footprints in 2D
• draggable room blocks in 3D
• resize handles in 2D
• shared layout state between both views
• inspector for room name, position, width, and height

Run locally

cd floorplan-builder-ts
npm install
npm run dev

Then open the local Vite URL shown in the terminal.

Build

npm run build

Good next design steps

1. decide whether the core object should stay as rectangular rooms or switch to wall-by-wall drawing
2. decide whether dimensions should be shown in feet directly on the canvas
3. decide whether the app should feel more blueprint-like, minimal, or polished/architectural
4. decide whether the 3D mode should stay as a preview or become a full editing space

Suggested collaboration flow

We can keep doing this in short design rounds:

• you pick the feature or visual direction
• I implement that exact slice
• we review it together
• then move to the next piece