An exploration into creating a professional-grade floor planning application with real-time manipulation, undo/redo history, and an intuitive drag-and-drop interface—all in pure vanilla JavaScript.
Understanding the vision behind ARCH_OS and its core objectives
ARCH_OS is a web-based floor plan designer that enables users to create, edit, and visualize room layouts through an intuitive drag-and-drop interface. Built entirely with vanilla JavaScript, it demonstrates that complex interactive applications don't require heavy frameworks.
The project was inspired by professional tools like SketchUp and RoomSketcher, with a focus on accessibility, performance, and modern UI/UX patterns. It serves as both a practical tool and a showcase of advanced DOM manipulation techniques.
Intuitive object placement with grid snapping for precision
Unlimited undo/redo with complete state preservation
Pan and zoom across a 6000×6000px workspace
Automatic dimension display in meters (1px = 2cm)
Identifying the gap in the market and creating meaningful value
Existing floor planning tools are often bloated, expensive, or require account creation. Most web-based alternatives lack polish and professional features.
ARCH_OS provides a free, instant-access floor planner with professional features and modern UX patterns.
The tools and techniques powering ARCH_OS
Pure ES6+ JavaScript with no frameworks. Demonstrates that complex interactive UIs don't require React, Vue, or Angular.
CSS custom properties, clip-path for complex shapes, pseudo-elements for furniture details, and CSS transforms for rotation.
Complex mouse interaction handling for drag, pan, right-click context menus, and wheel zoom with proper event propagation.
Centralized state object managing mode, zoom, pan, selection, drag state, and full history for undo/redo operations.
Data-driven furniture definitions with dimensions, styles, z-index, and CSS classes—making new assets trivial to add.
Professional-grade keyboard support with Ctrl+Z/Y for history, Delete for removal, R for rotation, and Space for pan toggle.
How the application is structured for maintainability and performance
Key technical obstacles and how they were overcome
The Problem: Managing multiple interaction modes (select, pan, drag) simultaneously while preventing conflicts. For example, clicking an object while in pan mode shouldn't select it, and dragging should work differently from panning.
Implemented a state machine with distinct modes and sub-states. Each mouse event checks the current mode and active operations before deciding the action. Used separate state flags for panning.active and drag.active to handle concurrent interactions.
The Problem: When zoomed in or out, mouse coordinates don't map 1:1 to canvas coordinates. Dragging at 50% zoom would move objects half as far as expected; at 200% zoom, twice as far.
Applied inverse zoom transformation to all coordinate calculations. Mouse delta is divided by the current zoom level to get the true canvas-space movement, ensuring consistent behavior at any zoom level.
The Problem: Saving complete application state for undo/redo while maintaining all object properties (position, rotation, z-index, custom styles) and handling the history pointer correctly when new actions branch from a past state.
Serialize all DOM elements to a JSON snapshot on each action. Store both inline styles and dataset attributes. When branching (new action after undo), prune the future states. Restore by clearing the canvas and recreating elements from JSON.
The Problem: Creating visually distinct furniture pieces (L-shaped sofas, stoves with burners, toilets with tanks) without using images or SVG, while keeping the DOM lightweight.
Leveraged CSS pseudo-elements (::before, ::after), clip-path polygons for L-shapes, and background-image gradients for patterns. Each furniture type is a single div with CSS classes that add visual complexity.
The Problem: Objects can be rotated to any angle, but they should still snap to the grid by their origin point. After rotation, the visual bounding box changes but the snap point should remain consistent.
Applied rotation via CSS transform (which doesn't affect layout position) while keeping the left/top coordinates as the snap reference. This separates visual rotation from positioning, making grid snap calculations straightforward.
What makes ARCH_OS a capable floor planning tool
Click any asset in the library to spawn it on the canvas. Drag to reposition with smooth, responsive movement.
25px grid ensures precise alignment. Objects snap automatically for professional-looking layouts.
Full history system with Ctrl+Z and Ctrl+Y support. Never lose work with unlimited undo levels.
Rotate any object 45° or 90° via context menu or 'R' key. Perfect for angled furniture arrangements.
Navigate the large 6000×6000px canvas with hand tool panning and Ctrl+Wheel zoom (20%-300%).
25+ furniture pieces across 6 categories: Structure, Bedroom, Living, Kitchen/Bath, Office, and Outdoors.
Selected objects show their dimensions in meters. Scale is 50px = 1m for real-world accuracy.
Bring to front or send to back via context menu. Z-index management for overlapping elements.
Power user shortcuts: R (rotate), Delete (remove), Space (pan toggle), [ ] (layers).
Project metrics and performance achievements
What I gained from building ARCH_OS
Managing complex interaction modes (select, pan, drag) requires careful state design. A single mode flag isn't enough—you need sub-states for concurrent operations.
Working with zoom requires understanding the difference between screen space and canvas space. Every coordinate must be transformed appropriately.
CSS pseudo-elements, clip-path, and gradients can create surprisingly complex visuals without images or canvas—keeping the bundle size minimal.
Undo/redo is more than a stack. You need to handle branching (pruning future on new action), efficient serialization, and UI state synchronization.
Understanding when to stopPropagation() vs. let events bubble is crucial for nested interactive elements that all need click handling.
Defining furniture as data objects rather than hardcoded functions makes the system extensible. Adding a new asset is just adding a config entry.
Ideas and features planned for future iterations
Export floor plans as JSON files and reload them later. Enable sharing designs with others via file transfer.
PlannedCapture the canvas as PNG or SVG for presentations, printing, or sharing on social media.
PlannedDraw lines between points to measure distances. Essential for checking furniture fits in spaces.
In ProgressColor picker for walls, floors, and furniture. Match your actual room colors for realistic planning.
PlannedDrag corner handles to resize objects dynamically. Custom-size walls and furniture pieces.
In ProgressPre-built room layouts (bedroom, kitchen, office) to jumpstart your designs quickly.
PlannedFull tablet and mobile support with pinch-to-zoom, two-finger pan, and touch-friendly UI.
ExploringGenerate a basic 3D walkthrough view of your floor plan using Three.js or similar library.
ExploringMultiple users editing the same floor plan simultaneously with WebSocket sync.
ExploringStart planning your dream room layout with ARCH_OS. No sign-up required, works instantly in your browser, and it's completely free. Drag, drop, and create!