Interactive 3D Floor Planner

Design your
space in 3D.

Draw floor plans from dimensions or by hand. Drag low-poly furniture around a snapping grid. Rotate your room in full 3D or isometric view — live in your browser, no plugins.

10

Furniture pieces

2

View modes

0.5m

Snap grid

Start DesigningSee Live Demo

Everything you need

A focused set of tools for quickly visualizing and communicating a room layout.

Room Editor

Draw or Measure

Input exact room dimensions in meters, or sketch walls freehand on the grid canvas. Both modes snap to a 0.5m grid.

Furniture Library

Low-Poly Furniture

10 furniture pieces across 4 categories — seating, tables, beds, and storage. Each piece built from flat-shaded box geometries for a clean, minimal look.

Placement

Drag & Snap

Click to add, drag to position. All pieces snap to the 0.5m grid. Rotate in 45° or 90° increments. Scale between 0.5× and 2×.

Camera

Perspective & ISO

Toggle between free-rotate 3D perspective and isometric top-down view. Orbit, pan, and zoom with your mouse or trackpad.

Visual Style

4-Shade Palette

Every furniture piece uses only 2–4 color shades. Flat shading (no gradients) creates that clean low-poly architectural look.

Portable

Drop Into Any Site

The entire widget is a self-contained folder. Copy it, install 3 packages, and it's live. Comes with an IMPLEMENTATION.md Cursor reads to match your site's theme.

Live Demo

Try it right here

Create a room, place some furniture, and rotate the view. This is the same widget you can drop into your own site in minutes.

Loading planner…

Enter dimensions → Create RoomPick furniture from the right panelDrag pieces to position themToggle 3D / ISO in the toolbar
Open Full-Screen PlannerHow to integrate

Multiple integration options

Choose the integration method that works best for your project — from simple iframe embeds to full NPM packages.

Iframe Embed (Easiest!)

RECOMMENDED

Just copy and paste an iframe — no dependencies, no build process. Works on any website, CMS, or platform. Perfect for WordPress, Wix, Squarespace, or custom sites.

Generate Embed Code →View Demo

Or integrate via NPM package

For Next.js/React projects. Cursor reads IMPLEMENTATION.md to integrate automatically.

01

Copy the folder

Drop the entire `floor-planner/` folder into the root of your Next.js project.

cp -r floor-planner/ your-project/
02

Install 3 packages

Three.js, React Three Fiber, and Zustand. That's all.

npm install three @react-three/fiber @react-three/drei zustand
03

Import and render

One import, one component. Give the container a height and you're done.

import FloorPlannerApp from "@/floor-planner";

<FloorPlannerApp height="600px" />
04

Match your theme

Pass a `theme` prop with your site's colors. Cursor reads IMPLEMENTATION.md to do this automatically.

<FloorPlannerApp
  theme={{ primary: "#1B3A4B", accent: "#F4A261" }}
/>

Cursor reads floor-planner/IMPLEMENTATION.md

Full step-by-step instructions, prop docs, API reference, and theme mapping guidance — everything Cursor needs to integrate the widget into any site and match its visual style automatically.