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.

✨ 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

🚀 Getting Started

# Clone the repository
git clone https://github.com/theLodgeBots/open3dFloorplan.git
cd open3dFloorplan

# Install dependencies
npm install

# Start the development server
npm run dev

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

Production Build

npm run build
npm run preview

Build NPM Package (Web Component)

Build package output (ES module + CSS + assets):

npm run build:package

Check package contents before publish:

npm run pack:check

Create tarball for local testing:

npm pack

Notes:

• Requires Node.js 18+ (recommended Node.js 20+).
• This repo includes .nvmrc (20.20.2). Run nvm use before build/package commands.
• Current package build output is in dist/:
  • dist/floorplan-editor.es.js
  • dist/floorplan-editor.css
  • dist/assets/*
• package.json currently has private: true. To publish to npm, set private to false first.

Publish To NPM

# 1) bump version
npm version patch

# 2) publish
npm publish

If you use a scoped package name (example @your-scope/open3dfloorplan), publish with:

npm publish --access public

Install And Use In Another Project

npm i open3dfloorplan

In app entry:

import "open3dfloorplan";
// Styles are injected into each component shadow root at runtime.
// Do not import package CSS globally in the host app.

For React wrappers, ensure the host custom element can expand:

<floorplan-editor style={{ display: "block", flex: 1, minHeight: 0 }} />

In HTML:

<floorplan-editor
  project-id="demo-project"
  read-only
></floorplan-editor>

Asset URLs are resolved automatically by the component runtime. It first tries the package script location (./assets next to the loaded bundle), then falls back to /assets. If your host app bundles this package into a single app script (no standalone floorplan-editor*.js script tag), set window.__FLOORPLAN_ASSETS_URL__ = "<your-assets-base>" before loading the package. Tailwind CSS is precompiled into the package bundle and attached per component instance. Runtime no longer injects Tailwind Play CDN. If inline style injection is blocked (for example by CSP), the runtime falls back to attaching floorplan-editor.css inside the component shadow root.

If styles look incomplete in a legacy app:

• Check the component has a shadow root: document.querySelector("floorplan-editor")?.shadowRoot.
• Verify a style node exists in shadow root with data-open3dfloorplan-shadow-style.
• If your app uses CSP nonce, expose nonce via window.__webpack_nonce__ before loading app code so runtime style injection can attach the nonce.

Optional runtime props from JavaScript:

const el = document.querySelector("floorplan-editor");
el.permissions = {
  canDraw: true,
  canAct: true,
  canDelete: false,
  canManageProject: false,
};

el.heatmapData = {
  byCatalogId: {
    camera: [
      [0, 1, 1, 2],
      [0, 1, 2, 3],
      [0, 0, 1, 2],
      [0, 0, 1, 1],
    ],
  },
};

⌨️ 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 — Optional cloud sync

🤝 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 ensure the build passes: 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.