Interactive 2D Room Planner

Complex Product Engineering · Interactive Editor

Interactive 2D Room Planner interface preview

Overview

Canvas-based planning application with drag-and-drop room creation, precision transforms, snap-to-grid behavior, undo and redo history, structured layout persistence, and JSON import and export.

Features

  • Drag-and-drop room and object placement
  • Precise move, rotate, resize, and alignment controls
  • Snap-to-grid and geometry-based editing behavior
  • Undo and redo support with structured state history
  • JSON import and export for reusable room layouts
  • Session persistence for restoring in-progress work

Technical highlights

  • Interactive canvas rendering and object lifecycle with Fabric.js
  • Modular application state and history management with Zustand
  • Precision transforms, snapping, and object-normalization logic
  • Structured layout data model with import, export, and persistence
  • Performance-conscious rendering and state updates

Technologies

  • React
  • TypeScript
  • Fabric.js
  • Zustand
  • Tailwind CSS

More projects

Back to all projects