DEV3 Free Floor Plan Sketcher — Source Code (React + Tailwind)

Source code of the DEV3 Floor Plan Sketcher, an SVG floor plan sketcher with snapped rectangle and polygon rooms, doors, windows, a furniture library, live wall lengths and areas, undo/redo and PNG, PDF and JSON export.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/floor-plan-sketcher shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Pan and zoom SVG canvas with grid and corner snapping
• Rooms from rectangles or clicked polygons with live wall-length labels and areas
• Doors and windows bound to walls, draggable along them
• Twenty-two flat top-down furniture icons that move, rotate and resize
• Metric and imperial display over centimetre storage, history-based undo/redo, validated JSON import

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jspdf.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• A planning sketch only; walls are drawn per room, so shared walls are two lines.
• PNG and PDF exports are rasterised from the SVG in the browser.