Floor Plan Studio

A free, browser-only tool for tracing phone photos of evacuation maps into floor-plan SVG files. No sign-up, no server, no install, no build step.

Libraries

Only two, both version-pinned from a CDN, both loaded straight by the browser:

• Fabric.js 6.7.1 from jsDelivr (https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.mjs) — the canvas interaction layer behind the drawing stage: selection, move/scale/rotate controls, groups, per-vertex polygon controls, zoom and panning.
• Tesseract.js (lazy, in a Worker) for reading room numbers off the photo.

Open it

Any static file server works (ES modules need http://, not file://):

npx --yes serve -l 8080 .

Then open http://localhost:8080/. On GitHub Pages just publish the repo root.

The flow

The top bar's step strip tracks four steps: 1 Photo · 2 Trace · 3 Preview · 4 Export.

1. Start blueprint. Building name, Property number, floor number, file name (e.g. hjlc-1).
2. Flatten the photo. Drop the photo, drag the four corners onto the map's corners, press Flatten. The photo becomes the onion-skin background (opacity slider, hold H to flash it). A floor posted as several photos: choose Add multiple photos (or drop several files), flatten each one in turn ("Photo 1 of 3"), then line them up side by side on the merge board (drag, Size, Turn, See through) before tracing.
3. Build. Palette on the left (four guided steps: outline, doors and stairs, hallways, rooms — step 2 unlocks once the outline exists, step 3 once there is at least one door or stair, step 4 once there is at least one hallway, plus a collapsible Legend at the bottom), Fabric.js drawing stage in the middle, properties on the right, a one-line hint at the bottom. Select several pieces and turn them together with the round handle or the Turn together buttons (quarter turns, the whole group as one piece). Deleted the outline by accident? The card offers Restore outline (it follows the rooms if they moved), Auto-outline or Draw it again. Everything drawn here is in the exported SVG: hallways as grey corridors, staff walls as dashed purple lines. The Legend piece (under Compass) puts the key on the plan: drag it where you want it (or click it to drop it beside the building), move it, and pull a corner to resize it evenly. A plan has one legend; its piece greys out ("Legend · placed") until you delete that one.
4. Preview. Clicking Export (top bar or step 4) opens a full-screen Preview first: the exact SVG that will be exported, rendered on white next to the legend key and the checklist. Page size picks the file's frame: Fit to SVG (the default, and the one for the map) sizes the SVG to hold the plan, compass and legend with nothing cut off; Letter 8.5 × 11 (US printer paper) or A4 (printer paper elsewhere) shows the whole printed sheet. Auto centers the drawing and picks portrait or landscape; a dashed box around the whole drawing can then be dragged to move it and pulled by a corner to resize it (proportions never change — also Size on page slider, −/+ and Center & fit to page), which switches Auto to the orientation in use. The drawing can't be moved or enlarged into the ¼ in / 6 mm edge printers can't print. The layout is remembered per project, and the download prints at that paper size and orientation. Back to editing returns to the plan with no changes; Download files runs the download.
5. Export. Downloads <slug>.svg and <slug>-posted.jpg and shows the building-extras.json snippet plus the two commands to run.

Everything autosaves to IndexedDB (and on pointer-up, tab hide and page close). Save .json writes a single project file with the photo embedded so it can be moved or committed.

Where files are saved

If your browser supports it, you can pick a local folder (from the start screen, or the modal offered when you start a blueprint). Once a folder is set, every save writes one <slug>.floorplan.json per plan into it — atomically (via a temp file and rename) on every change, with undo history included — alongside the IndexedDB copy. Browsers without folder access (File System Access API) fall back to browser storage only; use Save to download a copy by hand.

Hotkeys

Key	Action
V / R / F / O / A / S / C	Select / Room / Outline / Door / Hallway / Stair / Compass
D	Duplicate selected room in a row (auto-increments the number)
1–5	Room class: room, big, ours, core, void
G	Toggle grid
H (hold)	Flash the photo
Alt (hold)	Disable magnet snapping
Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y	Undo / Redo
Ctrl+C / Ctrl+V	Copy / Paste (keeps layout, offers auto-increment)
Delete, arrows, Esc, Enter	Delete, nudge, cancel, confirm

Output

The SVG dialect is documented in docs/DIALECT.md. The module layout and contracts are in docs/ARCHITECTURE.md and docs/VIEW-API.md.

Tests

npm test

npm run test:compat

npm test runs the Node unit tests (geometry, every validation rule, export/import round trips on synthetic docs and the traced HJLC fixtures, route finding, a 300-room stress test). test:compat reads the exported fixtures with a JS and a Python port of the the map site's tools/build_rooms.py parser rules and diffs the result. Browser steps are in tests/MANUAL.md. tests/browser/ holds a Playwright smoke test (the whole outline -> doors -> hallway -> room -> compass -> reload -> export flow) and a drag-performance test (2,000 rooms):

node_modules/.bin/playwright test --config tests/browser/playwright.config.js

Pieces

Palette chips render as small live previews using the same look as the exported plan: Room (grey box, number), Small room (smaller grey box), Big room (larger bluish box, "Classroom"), Our room (pink box), Restroom core (grey box, "WC"), Elevator core (grey box, up/down arrow), Stair block (grey box with 4 tread lines), Door (wall line with a white gap and green "EXIT"), Void (hatched/ dashed grey box), Compass (the compass rose). Dragging a chip shows the same SVG as the floating ghost, scaled to the current plan zoom.

License

MIT, see LICENSE.