asu-floorplanner

A self-contained 2D/3D floor planner React component. Drop it into any Next.js, Vite, or Create-React-App project and pass an onSave callback — no API setup required inside the package.

Install

npm install asu-floorplanner
# or
pnpm add asu-floorplanner

Quick start

import { FloorPlanner } from 'asu-floorplanner';

export default function MyPage() {
  return (
    // The parent must have a defined height
    <div style={{ height: '100vh' }}>
      <FloorPlanner
        onSave={async (data) => {
          // data = { shapes, walls, version }
          await fetch('/api/floor-plans/my-plan', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
          });
        }}
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | onSave | (data: FloorPlanData) => Promise<void> \| void | — | Called on Ctrl+S and auto-save. If omitted, saving is disabled. | | initialData | { id, name, shapes, walls } | — | Pre-load an existing plan on mount. | | autoSaveDelay | number | 30000 | Auto-save debounce in milliseconds. | | className | string | '' | Extra CSS classes on the wrapper div. |

Load an existing plan

const plan = await fetch('/api/floor-plans/plan-1').then(r => r.json());

<FloorPlanner
  initialData={{
    id: plan.id,
    name: plan.name,
    shapes: plan.shapes,
    walls: plan.walls,
  }}
  onSave={async (data) => {
    await fetch(`/api/floor-plans/${plan.id}`, {
      method: 'PUT',
      body: JSON.stringify(data),
    });
  }}
/>

Tailwind CSS

The package uses Tailwind utility classes. Add the package path to your tailwind.config:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/asu-floorplanner/dist/**/*.{js,mjs}',
  ],
};

If you are not using Tailwind, import the pre-built stylesheet instead:

import 'asu-floorplanner/dist/styles.css'; // coming in v1.1

Advanced: use individual pieces

import {
  FloorPlannerCanvas,
  Toolbar,
  PropertiesPanel,
  StatusBar,
  ViewToggle,
  ExportModal,
  useFloorPlannerStore,
  useKeyboardShortcuts,
  useAutoSave,
} from 'asu-floorplanner';

export function CustomLayout() {
  const { viewMode } = useFloorPlannerStore();
  useKeyboardShortcuts();

  return (
    <div className="flex h-screen">
      <Toolbar />
      <div className="flex-1 relative">
        {viewMode === '2d' ? <FloorPlannerCanvas /> : null}
      </div>
      <PropertiesPanel />
    </div>
  );
}

Keyboard shortcuts

| Key | Action | |---|---| | V / Esc | Select tool | | R | Room (rectangle) | | W | Wall tool | | L | Line | | D | Door | | O | Window | | T | Text label | | F | Furniture | | G | Toggle grid | | S | Toggle snap | | + / - | Zoom in/out | | 0 | Reset view | | 2 / 3 | Switch 2D / 3D | | Delete | Delete selected | | Ctrl+Z | Undo | | Ctrl+Y / Ctrl+Shift+Z | Redo | | Ctrl+A | Select all | | Ctrl+S | Save (calls onSave) |

Export formats

• PNG — raster snapshot of the 2D canvas
• SVG — scalable vector of all shapes and walls
• JSON — full plan data, re-importable via importData()

TypeScript types

import type { Shape, Wall, FloorPlanData, FloorPlannerProps, ToolType } from 'asu-floorplanner';

Peer dependencies

react >= 18
react-dom >= 18

All other dependencies (three.js, zustand, lucide-react, sonner, uuid, immer) are bundled.

License

UNLICENSED — private package for AS United Pte Ltd.