openplan3d

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

---

✨ Features

🏗️ Drawing Tools

• 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

🛋️ Furniture Library

• 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

🏠 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

📐 Pro Tools

• 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

📤 Export

• 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

📥 Import

• JSON — Restore saved projects
• Apple RoomPlan — Import room scans from iOS devices
• Clipboard images — Paste reference images directly onto the canvas

---

📱 Companion iOS App

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).

---

🚀 Getting Started

The easiest way to try openplan3d is the hosted version at app.openplan3d.com — no install needed.

To run it locally, use Node.js 24 (see .nvmrc) and npm:

# Clone the repository
git clone https://github.com/laanlabs/openPlan3D.git
cd openPlan3D

# Install dependencies
npm ci

# Start the development server
npm run dev

Open http://localhost:5173 in your browser.

Development Checks

npm test
npm run check
npm run build
npx playwright install --with-deps chromium
npm run test:browser

GitHub Actions runs these checks for pull requests and pushes to main. The regression suite covers local storage failures, autosave status, room metadata and exports, and keyboard tools. Use npm run test:watch while working on a fix. Production-browser CI covers import/edit/undo/save/reload/export, damaged-file recovery, catalog loading, 3D and cold/warm asset transfers. It starts an isolated Node server with analytics and cloud uploads disabled. Failure screenshots/traces and the HTML report are retained for seven days. Drawing and touch gestures still need separate interactive/device checks.

Production Build

npm run build
npm run preview

---

⌨️ Keyboard Shortcuts

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

---

🛠️ Tech Stack

• SvelteKit — Application framework
• Three.js — 3D rendering engine
• Tailwind CSS — Styling
• TypeScript — Type safety
• jsPDF — PDF generation
• dxf-writer — DXF export
• Firebase — Hosting, analytics and temporary iPhone handoffs; projects stay local

---

🤝 Contributing

Contributions are welcome! Here's how to get started:

1. Fork the repository
2. Create a branch for your feature: git checkout -b feature/my-feature
3. Make your changes and run npm test, npm run check, and npm run build
4. Submit a pull request with a clear description of your changes

Please keep PRs focused and include screenshots for UI changes.

---

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ for architects, designers, and anyone who needs a floor plan.

---

📱 iOS capture handoff

The companion iOS app can share an edited plan or Apple RoomPlan scan with the web editor. Local Export Editable Plan (JSON) requires no cloud upload.

1. The updated iOS app posts JSON to /api/handoffs, which validates it and reserves quota before creating inbox/{CODE}.json in openplan3d.firebasestorage.app. The code excludes I, O, 0 and 1. Unchanged plans reuse a valid link. Older distributed builds still upload directly to Storage during migration.

2. The app shows a QR code / link of the form:

   https://app.openplan3d.com/editor?import=CODE
   

3. When the editor opens with an import query 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=media
   

   and imports it as a new project. Prepared iPhone exports preserve their angles by default; raw captures retain their scan-cleanup defaults. On success the import param is replaced with the new project's id so a refresh won't re-import.

During migration, storage.rules still permits legacy public creates below 10 MiB. This bypasses aggregate admission limits until cutover. The new endpoint enforces 1 MiB per capture, 100 reservations / 25 MiB per UTC day, and 10 reservations per minute. See configuration, costs and the client migration gate. These limits are not a cap on Firebase spending.

One-time setup (project owner)

1. Enable Storage for the openplan3d project in the Firebase console if it isn't already.

2. Deploy the rules:

   firebase deploy --only storage

3. Auto-delete stale captures — set a lifecycle rule that makes objects under the inbox/ prefix eligible for deletion at age 1 day (prefix-scoped lifecycle uses matchesPrefix; deletion is asynchronous). Save this as lifecycle.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

   Review the bucket's soft-delete, versioning, and retention settings as well. Deleted objects can remain billable during soft-delete retention; a one-day lifecycle does not guarantee one day of billed storage. Consider disabling recovery only for a bucket dedicated to reproducible temporary transfers, after confirming originals remain safely stored on-device. See the live configuration audit and cost plan and Cloud Storage soft-delete guidance.

4. 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