Arcada
📐 react & pixi.js interior design software / floor plan creator
Install / Use
/learn @mehanix/ArcadaREADME
Introduction
Even had to redesign a room, a floor, or your entire house, and you spent hours drawing floor plans by hand, on graph paper, trying to make sure your sofa will fit next to the dresser? I certainly have, and it's a frustrating experience. I think we can do better than that.
As the vast majority of floor planner apps are available as part of a paid service, or too complicated to use for my needs, I decided to write my own. Enter Arcada, an open-source floor planner app.
Features
👷♀️ Add walls
<p> <img src="src/res/add-wall.gif"> </p>⚒️ Edit walls
<p> <img src="src/res/edit-walls.gif"> </p>🛋️ Add/edit furniture
<p> <img src="src/res/edit-furniture.gif"> </p>🚪 Add doors/windows
<p> <img src="src/res/add-door.gif"> </p>📏 Measure tool
<p> <img src="src/res/measure-tool.gif"> </p>🌟 Accurate to scale
🌟 Multiple floor support
<p> <img width="250" height="250" alt="image" src="https://github.com/user-attachments/assets/8ffb23a8-d9a4-46e4-8875-85360cdfce19" /> </p>🌟 Print your designs
<img width="600" height="500" alt="image" src="https://github.com/user-attachments/assets/d12ea2ac-94f1-457a-96c0-b6fa15300759" />🌟 Save/load support
<p> <img width="250" height="250" alt="image" src="https://github.com/user-attachments/assets/1fcf9aa3-48a4-4208-ac12-fdc323dbe9b1" /> </p>🌟 Component library with plenty of options
<p> <img width="250" height="500" alt="image" src="https://github.com/user-attachments/assets/76cb0f3f-78fc-44a6-8b1b-a69ce17fc936" /> </p>🌟 Cross-platform
Tech stack and docs
Client built using React, Pixi.js, Zustand, with Mantine as the component library for the UI. The floor plan engine is custom built.
Server-side powered by Express.js, using MongoDB with Mongoose as ODM.
Quick setup
If you want to run the app for yourself the easiest way to to is to use the following docker-compose setup. Have fun!
Alternatively:
Clone this repo and the arcada-backend repo. Run the following:
npm i
npm run start
Launch the back-end using node app.js.
Related Skills
bluebubbles
349.7kUse when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".
slack
349.7kUse when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
frontend-design
109.7kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Agent Development
109.7kThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
