Planform Studio
Architectural Floor Plan & Hotel Spatial CAD
Browser-based architectural CAD workspace for image-assisted floor plans and multi-storey hotel concept modeling.
Overview
Planform Studio is a specialized browser CAD environment engineered for hospitality architects, interior designers, and hotel developers. It enables rapid drafting of 2D architectural floor plans, wall polyline extrusion, room dimensioning, and multi-storey spatial zoning directly over drone imagery, topographic scans, or conceptual sketches.
Design decisions
The choices that shaped the system, and why.
- 1
Why SVG Geometry Manipulation over Heavy 3D Engines (Three.js/WebGL)?
Floor plans require precise 2D millimeter scaling, vector zooming, and clean architectural print exports. SVG provides infinite vector scaling, direct DOM event binding per wall/room, and lightweight memory consumption on mobile tablets.
- 2
Image-Assisted Tracing Engine
Implemented an image calibration module allowing architects to upload drone survey photos or rough sketches, define a 1-meter reference scale line, and snap vector walls directly over real land contours.
Architecture
Vector Geometry Engine
Pure SVG and Canvas mathematical calculation for snap-to-grid, wall intersections, door/window punchouts, and area calculation.
Layer Management System
Multi-layer stacking separating background satellite/site surveys, structural walls, furniture layouts, and MEP annotations.
Parametric Hotel Room Catalog
Pre-engineered room typologies (Deluxe King, Twin Suite, Villa, Restaurant, Pool Deck) with real-world dimensions.
High-Fidelity Export Pipeline
Generates printable blueprints, DXF vectors, and high-resolution PNG/PDF spatial reports.
DevOps & deployment
Can be hosted statically on AWS S3 / CloudFront or Cloudflare Pages with zero backend compute overhead.
How it ships · Static Vite build in an Nginx/Node container
- 1npm ci
- 2tsc -b && vite build
- 3Serve dist/
Features
- Sub-millimeter scale precision with real-world metric conversion.
- Image-assisted tracing: upload land surveys and trace walls with magnetic snap points.
- Multi-storey stacking: duplicate floor layouts and adjust vertical stairwell alignments.
- Automated square-meter and cubic-volume reporting for hotel cost estimation.
Screenshots
Related writing
DevOps · 4 min
Automation Did the Typing. Humans Did the Work.
What automation genuinely saved across 23 projects — and the drawings, verification, font checks, hand calibration and Sinhala writing that only people could do.
25 Oct 2026
Deep dive · 4 min
Planform Studio: Browser CAD for Hotel Concepts in SVG and Three.js
Metre-accurate SVG drafting, hand-calibrated reference images, 1–12 independent storeys and a strict object budget — CAD that stays honest about being concept design.
6 Jul 2026
