House Designer

\n \n

\n\n

Tools

\n \n \n \n \n \n \n \n \n

\n\n

Properties

\n No element selected\n

\n \n

\n\n

Furniture

\n \n \n \n \n \n \n \n \n

\n\n

\n Grid Size:\n \n

\n Design Name:\n \n

\n \n \n

\n X: 0, Y: 0\n Scale: 1:50\n

\n View Source\n

\n\n \n \n\n \n \n\n \n\n",[18,66],"pulls","branches",1,"forks","envVars",{"_193":26,"_195":26},"connections",{"_193":26,"_194":26},"count","unfilledCount","emptyCount",{"_35":248,"_13":247,"_64":241,"_45":-5,"_37":38,"_164":249,"_165":24,"_39":250,"_41":26,"_67":92,"_167":-5,"_68":30,"_168":-5,"_210":251,"_17":252},{"_35":239,"_13":240,"_64":104,"_45":241,"_37":38,"_164":128,"_165":24,"_39":242,"_41":187,"_67":243,"_167":244,"_68":30,"_168":-5,"_210":245,"_17":246},{"_35":163,"_13":18,"_64":91,"_45":-5,"_37":38,"_164":42,"_165":24,"_39":236,"_41":26,"_67":92,"_167":-5,"_68":30,"_168":-5,"_210":237,"_17":238},{"_35":181,"_13":66,"_64":65,"_45":91,"_37":38,"_164":42,"_165":24,"_39":233,"_41":26,"_67":21,"_167":183,"_68":30,"_168":-5,"_210":234,"_17":235},{"_35":177,"_13":89,"_64":88,"_45":91,"_37":38,"_164":83,"_165":24,"_39":230,"_41":26,"_67":90,"_167":179,"_68":30,"_168":-5,"_210":231,"_17":232},{"_35":173,"_13":80,"_64":79,"_45":91,"_37":38,"_164":74,"_165":24,"_39":227,"_41":26,"_67":21,"_167":175,"_68":30,"_168":-5,"_210":228,"_17":229},{"_35":223,"_13":222,"_64":216,"_45":-5,"_37":38,"_164":217,"_165":24,"_39":224,"_41":26,"_67":92,"_167":-5,"_68":30,"_168":-5,"_210":225,"_17":226},{"_35":213,"_13":214,"_64":215,"_45":216,"_37":38,"_164":217,"_165":24,"_39":218,"_41":26,"_67":90,"_167":219,"_68":30,"_168":-5,"_210":220,"_17":221},{"_35":205,"_13":206,"_64":207,"_45":-5,"_37":38,"_164":187,"_165":24,"_39":208,"_41":26,"_67":21,"_167":209,"_68":30,"_168":-5,"_210":211,"_17":212},"35a70090-34e4-11f0-836c-9e149126039e","README.md","35a70158-34e4-11f0-836c-9e149126039e",["D",1747681520574],"# House Designer App\n\nA simple web-based application for designing house floor plans.\n\n## Features\n\n- 2D floor plan designer with canvas-based drawing\n- Tools for adding rooms, walls, doors, and windows\n- Basic furniture placement\n- Save and load designs\n- Measurement tools\n\n## Project Structure\n\n- `/backend` - Server-side code and API endpoints\n- `/frontend` - Client-side HTML, CSS, and JavaScript\n- `/shared` - Shared types and utilities\n\n## How to Use\n\n1. Draw walls by clicking and dragging on the canvas\n2. Add doors and windows using the toolbar\n3. Place furniture from the item palette\n4. Save your design using the save button\n5. Load previous designs from the dropdown menu\n\n## Technologies Used\n\n- HTML Canvas for rendering\n- Val Town blob storage for saving designs\n- TypeScript for type safety","children",[],[206],"44f1fece-34e4-11f0-8ae3-9e149126039e","types.ts","44f1ff8c-34e4-11f0-8ae3-9e149126039e","328b745a-362d-4bc6-8d85-b69e5472de75",3,["D",1747681546232],"// Types for the house designer app\n\n// Main design object\nexport interface Design {\n id?: string;\n name: string;\n createdAt?: string;\n updatedAt?: string;\n elements: Element[];\n width: number;\n height: number;\n scale: number; // pixels per meter\n}\n\n// Base element type\nexport interface Element {\n id: string;\n type: ElementType;\n x: number;\n y: number;\n rotation: number; // in degrees\n properties: Record;\n}\n\n// Types of elements\nexport enum ElementType {\n WALL = \"wall\",\n DOOR = \"door\",\n WINDOW = \"window\",\n ROOM = \"room\",\n FURNITURE = \"furniture\",\n TEXT = \"text\",\n DIMENSION = \"dimension\"\n}\n\n// Wall element\nexport interface WallElement extends Element {\n type: ElementType.WALL;\n properties: {\n length: number;\n thickness: number;\n color: string;\n };\n}\n\n// Door element\nexport interface DoorElement extends Element {\n type: ElementType.DOOR;\n properties: {\n width: number;\n isOpen: boolean;\n openDirection: \"left\" | \"right\";\n color: string;\n };\n}\n\n// Window element\nexport interface WindowElement extends Element {\n type: ElementType.WINDOW;\n properties: {\n width: number;\n height: number;\n color: string;\n };\n}\n\n// Room element\nexport interface RoomElement extends Element {\n type: ElementType.ROOM;\n properties: {\n width: number;\n height: number;\n name: string;\n color: string;\n floorColor: string;\n };\n}\n\n// Furniture element\nexport interface FurnitureElement extends Element {\n type: ElementType.FURNITURE;\n properties: {\n width: number;\n height: number;\n name: string;\n color: string;\n furnitureType: string;\n };\n}\n\n// Text element\nexport interface TextElement extends Element {\n type: ElementType.TEXT;\n properties: {\n text: string;\n fontSize: number;\n color: string;\n };\n}\n\n// Dimension element\nexport interface DimensionElement extends Element {\n type: ElementType.DIMENSION;\n properties: {\n length: number;\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n color: string;\n };\n}",[],[222,214],"shared","44f24820-34e4-11f0-8ae3-9e149126039e",["D",1747681546232],[203],[222],["D",1747681597257],[],[18,80],["D",1747681742539],[],[18,89],["D",1747681578287],[],[18,66],["D",1747681578287],[199,200,201],[18],"bc2c9c92-34e4-11f0-a0b8-9e149126039e","index.ts","fa997af3-a858-4d97-b5f0-356b1c1fb7f5",["D",1747681746265],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Design } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main HTML page with initial data\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for \"view source\" link\n const projectInfo = parseProject(import.meta.url);\n \n // Get list of saved designs\n const savedDesigns = await blob.list(\"design_\");\n \n // Inject data to avoid extra round-trips\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint to save a design\napp.post(\"/api/designs\", async c => {\n try {\n const design = await c.req.json() as Design;\n const id = design.id || `design_${Date.now()}`;\n \n await blob.setJSON(id, {\n ...design,\n id,\n updatedAt: new Date().toISOString()\n });\n \n return c.json({ success: true, id });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to get a design\napp.get(\"/api/designs/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const design = await blob.getJSON(id);\n \n if (!design) {\n return c.json({ success: false, error: \"Design not found\" }, 404);\n }\n \n return c.json({ success: true, design });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to list all designs\napp.get(\"/api/designs\", async c => {\n try {\n const designs = await blob.list(\"design_\");\n return c.json({ success: true, designs });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to delete a design\napp.delete(\"/api/designs/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n await blob.delete(id);\n return c.json({ success: true });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[247,240],"backend","3eafdf5e-34e4-11f0-97ef-9e149126039e",2,["D",1747681535733],[197],[247],["D",1747681364854],{"_11":12,"_141":71},{"_11":12,"_137":-5,"_70":71,"_31":69,"_138":139,"_140":30},{"_41":128,"_13":16,"_35":38,"_129":94,"_130":-5,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":14,"_136":12},"ctx",{"_54":-5,"_160":290,"_291":292,"_293":294,"_295":30,"_296":30,"_297":30,"_298":24,"_299":-5,"_300":-7,"_301":-7,"_302":26,"_303":30,"_304":30,"_305":-5,"_306":30,"_307":30,"_308":30,"_309":-5},"ENV",{"_261":262,"_263":264,"_265":16,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5a709144666c9e69e88140f015c586412f0fd8d3","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Tools

Properties

Furniture

Save Design

Delete Design

History · frontend