Skip to main content
Case Study

Layroom
A room before the room.

A browser tool that turns a flat floor plan into a space you can walk through. Upload the plan, trace the walls, drop in the furniture, and see the room before you sign the lease, buy the paint, or pitch the fit-out.

Role
Design, engineering, 3D
Year
2026 → public beta
Stage
Live
Layroom: a 2D floor plan turned into an interactive 3D room in the browser, with furniture placed in the space
Fig. 01 / the editor
01

Genesis

Everyone decides on a home from a drawing they can't actually read.

A floor plan is a contract written in a language most people don't speak. Lines, little arcs for the doors, a number that says 24 m² and means nothing until you're standing in it. People sign leases, knock down walls, and commit to a sofa on the strength of a sketch they're quietly guessing at.

Layroom started from that gap. Upload the plan you already have, trace its walls, and walk through the result in 3D, in the same browser tab, with no CAD, no install, and no account to get going.

02

From flat to walkable

Two surfaces, one truth: a precise 2D plan and a room you can stand inside.

Trace
You draw the walls over your uploaded plan on a fast 2D canvas. Snapping, right angles, real dimensions. AI assists the tracing, so even a crooked photo of a plan becomes clean geometry.
Extrude
Those walls rise into a 3D room you walk through with the mouse. Doors, windows, ceiling height. The 2D plan and the 3D space are the same model, seen two ways.
Furnish
Drop furniture from a starter catalog, or generate a custom piece for the corner nothing off the shelf will fill. The room stops being a layout and becomes yours.
03

Real 3D, for people who don't do CAD

The hard part isn't the rendering. It's making 3D feel like nothing at all.

Browser 3D is generous now, but the audience isn't technical. The whole point is that someone who has never opened a modeling tool can trace a plan and walk a room in a few minutes. Every gizmo, every handle, every camera control is a chance to lose them.

So the two surfaces stay locked together: edit a wall in 2D and the 3D updates; move in 3D and the plan agrees. State lives on the server, so a scene survives a refresh and follows you to another device. The frame budget is fixed, because a tour that stutters is a tour nobody believes.

04

What I'm still learning

Geometry doesn't forgive, and a believable room is mostly the boring parts.

A plan is forgiving; a room is not. A wall a few centimeters off reads as wrong the moment you step inside it, even when nobody can say why. Most of the work is the unglamorous middle: snapping, units, the thousand small corrections between a drawing and a space you trust.

Layroom is in public beta, version by version. Each release is one more reason to believe the room before you've paid for it.

Stack

  1. 01

    Three.js

    The room itself: walls, openings, furniture, and a walkthrough camera that holds 60fps in a tab.

  2. 02

    PixiJS

    The 2D plan editor. A fast canvas for tracing walls over an uploaded plan, where every pixel is a measurement.

  3. 03

    TypeScript

    The geometry layer that turns a flat outline into 3D mesh and keeps the two views describing one model.

  4. 04

    Nuxt

    SSR app shell, routing, and the editor surface. One codebase, fast first paint, shareable scenes.

  5. 05

    PostgreSQL

    Saved scenes and furniture, synced across devices. A room you closed yesterday opens exactly where you left it.

  6. 06

    Tailwind

    The interface as a token system, so the chrome stays quiet and the room stays the loudest thing on screen.

A room before the room.