Free Open Source 2D/3D Floor Plan Editor
Design floor plans in an intuitive 2D editor, then instantly preview them in a fully navigable 3D view — all in your browser. No account required, no server dependency; your projects stay on your device.
🌐 Try it live: app.openplan3d.com
- Walls — Click-to-place with automatic snapping and angle constraints
- Doors & Windows — Multiple styles (single, double, sliding, pocket, bi-fold, french doors; casement, bay, picture windows)
- Stairs — Straight, L-shaped, and U-shaped with configurable dimensions
- Rooms — Auto-detected from walls with customizable labels and colors
- 140+ items across categories: living room, bedroom, kitchen, bathroom, dining, office, outdoor, and more
- Drag-and-drop placement with rotation, resizing, and snapping
- Full 3D models rendered in the 3D view
- Real-time 3D preview — Toggle with
Tab - Walkthrough mode — First-person navigation through your floor plan
- Material editor — Apply textures to walls, floors, and ceilings (wood, tile, marble, carpet, concrete, brick, and more)
- Lighting — Ambient and directional lighting with adjustable intensity
- Snap to grid with configurable grid size
- Smart guides and alignment helpers
- Multi-select with box selection and alignment tools (align left, center, right, top, middle, bottom; distribute evenly)
- Layers — Organize elements across multiple layers with visibility toggles
- Annotations — Text labels with customizable font size and color
- Room presets — Quickly apply standard room dimensions
- Undo/Redo — Full history with grouped operations
- Version history — Auto-saved snapshots you can restore
- SVG — Scalable vector graphics
- DXF — AutoCAD-compatible format
- PDF — Print-ready output with title block
- PNG — High-resolution raster image
- JSON — Full project data for backup and sharing
- JSON — Restore saved projects
- Apple RoomPlan — Import room scans from iOS devices
- Clipboard images — Paste reference images directly onto the canvas
Scan a room with your iPhone and get an editable floor plan in seconds. The OpenPlan3D iOS app uses LiDAR (with an AR fallback for non-LiDAR devices) to build walls, doors, and windows as you walk, calculates room areas automatically, and shows the result in 2D and 3D — then hands the plan off to the web editor with one tap (see iOS capture handoff).
The easiest way to try openplan3d is the hosted version at app.openplan3d.com — no install needed.
To run it locally:
# Clone the repository
git clone https://github.com/laanlabs/openPlan3D.git
cd openPlan3D
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:5173 in your browser.
npm run build
npm run preview| Shortcut | Action |
|---|---|
V |
Select tool |
W |
Wall tool |
D |
Door tool |
T |
Text / annotation tool |
H |
Pan (hand) mode |
R |
Rotate selected furniture |
Tab |
Toggle 2D / 3D view |
Delete / Backspace |
Delete selected element(s) |
Escape |
Deselect / cancel |
Ctrl+Z |
Undo |
Ctrl+Shift+Z / Ctrl+Y |
Redo |
Ctrl+S |
Save project |
- SvelteKit — Application framework
- Three.js — 3D rendering engine
- Tailwind CSS — Styling
- TypeScript — Type safety
- jsPDF — PDF generation
- dxf-writer — DXF export
- Firebase — Optional cloud sync
Contributions are welcome! Here's how to get started:
- Fork the repository
- Create a branch for your feature:
git checkout -b feature/my-feature - Make your changes and ensure the build passes:
npm run build - Submit a pull request with a clear description of your changes
Please keep PRs focused and include screenshots for UI changes.
This project is licensed under the MIT License.
Built with ❤️ for architects, designers, and anyone who needs a floor plan.
The companion iOS app can hand a fresh Apple RoomPlan scan directly to the web editor via Firebase Storage:
-
The iOS app uploads the RoomPlan
room.jsonto Firebase Storage atinbox/{CODE}.jsonin theopenplan3d.firebasestorage.appbucket, whereCODEis 8 characters from[A-Z2-9](I, O, 0 and 1 are excluded to avoid ambiguity). -
The app shows a QR code / link of the form:
https://app.openplan3d.com/editor?import=CODE -
When the editor opens with an
importquery param, it downloads the JSON straight from Firebase Storage (no SDK needed):https://firebasestorage.googleapis.com/v0/b/openplan3d.firebasestorage.app/o/inbox%2F{CODE}.json?alt=mediaand imports it through the regular RoomPlan pipeline (default options: straighten + orthogonal), creating a new project. On success the
importparam is replaced with the new project'sidso a refresh won't re-import.
Access is controlled by storage.rules: public read and create are allowed only on inbox/{CODE}.json (content type application/json, < 10 MB); updates, deletes, and everything else in the bucket are denied.
-
Enable Storage for the
openplan3dproject in the Firebase console if it isn't already. -
Deploy the rules:
firebase deploy --only storage
-
Auto-delete stale captures — set a lifecycle rule that deletes objects under the
inbox/prefix after 1 day (prefix-scoped lifecycle usesmatchesPrefix). Save this aslifecycle.json:{ "rule": [ { "action": { "type": "Delete" }, "condition": { "age": 1, "matchesPrefix": ["inbox/"] } } ] }Then apply it with either:
gcloud storage buckets update gs://openplan3d.firebasestorage.app --lifecycle-file=lifecycle.json # or gsutil lifecycle set lifecycle.json gs://openplan3d.firebasestorage.app
-
CORS — the editor downloads captures from the browser, so the bucket must allow cross-origin GETs (without this the import fails with a CORS error in the console). Save this as
cors.json:[ { "origin": [ "https://app.openplan3d.com", "https://openplan3d--openplan3d.us-east4.hosted.app", "http://localhost:5173" ], "method": ["GET"], "responseHeader": ["Content-Type"], "maxAgeSeconds": 3600 } ]Then apply it (changes take a minute or two to propagate):
gcloud storage buckets update gs://openplan3d.firebasestorage.app --cors-file=cors.json