html{background:#071711;color:#edf6ef}body{margin:0}html,body{height:auto!important;overflow:auto!important}#root{display:none!important} #main a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;max-width:100%;box-sizing:border-box;padding:.4rem .6rem;margin-inline-end:.25rem;color:#c2e9f5;overflow-wrap:anywhere} #main a:focus-visible{outline:3px solid currentColor;outline-offset:3px} #main img{display:block;max-width:100%;height:auto} #main figure{margin:1.5rem 0}#main li{margin-block:.5rem} @media(forced-colors:active){html,#main{background:Canvas!important;color:CanvasText!important}#main a{color:LinkText}} Selected project

Living Room Planner

Built a measured SVG planner for testing furniture layouts and saving alternatives before moving anything.

Purpose

Living Room Planner helps people compare realistic furniture arrangements before moving anything heavy. It models an irregular room, openings, doors, fixtures, and furniture as measured geometry, providing enough editing control to test practical layouts while remaining quick to use in an ordinary browser.

Technical implementation

The planner uses JavaScript to handle dragging, resizing, renaming, rotation, flipping, and layout controls. SVG represents the room and its contents as scalable, dimension-aware geometry, while CSS keeps the blueprint readable. Named arrangements are saved with localStorage, allowing several options to be preserved and compared without an account or server.

Tools used

JavaScript
SVG
CSS
localStorage

Selected screens

Model the actual room Synthetic measured geometry demonstrates the planning workflow without revealing a real household layout.

Arrange editable furniture SVG furniture blocks expose dimensions, rotation, and placement as editable layout decisions.

Save and compare layouts Named layouts stay in the browser, supporting comparison without an account or server.

All projects About James Buckley