Introduction
Architect.ai is a browser-based floor-plan editor designed and built by SyntaxWise. Draw walls and the rooms appear, measured, then change the plan by dragging it or by asking in plain words.
- Year
- 2026
- Timeline
- 3 weeks
- Industry
- PropTech · Architecture & Construction
- Scope of work
- Product DesignWeb App DevelopmentGeometry EngineBackend & APIAI IntegrationBrand IdentityMarketing WebsiteMotion Design
Challenge
The client came to us with a gap they kept running into. Most houses start as a sketch on a napkin, or as hands in the air describing rooms, and the software that turns that into a real plan is built for professionals. The brief: an editor anyone could use, where the plan stays exact.
Three kinds of people needed the same thing. Homeowners want to see their idea before they pay anyone to draw it. Architects need to try a concept quickly and trust the numbers. Builders need a plan that measures correctly and exports. All three are trying to get from a vague idea to a drawing other people can act on.
So every wall had to be real geometry with real dimensions. Changing your mind had to be cheap: drag a wall and the rooms on either side update, without breaking the drawing. And you could describe a change in plain words instead of learning CAD.
We designed and built all of it: the geometry engine, the editor, the API, the AI features, the brand and the marketing site. It took three weeks.
The site is built like an architect's title block: hairline rules, small dimension labels, wide confident type and one surveyor's orange. The hero plan draws itself in, line by line.
Three animated plates, drawn to scale, explain the product: draw walls and get rooms, move a wall, ask for what you want.
Mobile
Every page is designed for the phone too: the same drawings, the same dimensions, readable at 390 px.
Draw
Click, move, click. Walls snap and join, and a room appears with its area. Drag a wall, and the rooms on either side resize with it.
Add a furnished room and drag it into place. The house becomes a block diagram while you move it, and doors are cut where the room joins.
Edit by chat
Ask for a change in plain words. The assistant edits the real plan, and one undo takes the whole change back.
“Turn the laundry into a second bathroom.”
Generate a plan
Say how many bedrooms and roughly how big. Pick a shape (an L, a two-car garage) and confirm the rooms. A layout solver then draws the floor, measured and furnished.
The AI gathers the requirements. It never draws the walls.
Upload a plan
Drop in a PDF or a photo of a drawing. Gemini reads the rooms, doors and printed sizes and works out the scale. The drawing becomes an editable plan.
Uploaded drawingEditable planExport & share
Every floor exports as a PDF sheet at a true architectural scale, with a title block and a scale bar. A view-only link lets a builder open the live plan without an account.
Open the real PDF sheetOne engine
The browser and the server run the same geometry code. The canvas edits instantly and sends a small operation, about 80 bytes instead of the whole document. The server replays it through the same functions, validates it and saves it. Chat edits go through the same engine, so the two sides never disagree about where a wall is.
Stack
- TypeScript
- React
- Vite
- Tailwind CSS v4
- Zustand
- NestJS
- Prisma
- PostgreSQL
- Google Gemini
- zod
- pdfkit
“What are you drawing?” offers three ways in: generate a plan, draw from scratch, or upload a drawing. Each project keeps its plans and variations.
Outcome
Real dimensions.
Plain-language edits.
A plan a builder can use.
- automated tests across engine, API and app
- 600+
- furniture and fixture symbols, generated
- 112
- sent per edit, not the whole document
- ~80 B
- from the first wall to export and share
- 3 wks
