Arctect

A fun little Electron app for sketching blueprints and floor plans — draw walls, lay out rooms, and watch it all render in a hand-drawn, chalk-on-blueprint style.

Features

• Walls — three ways to draw them: click-click (or drag) one segment at a time in a continuous chain, drag out a rectangle to get all 4 walls of a room shell at once, or trace a closed polygon corner by corner.
• Zones (rooms) — same idea, three ways to make one: drag a box, lasso a freeform polygon by clicking each corner, or click inside any closed loop of walls to auto-fill it as a room. Double-click a zone to name it; the area shows automatically.
• Select tool — click a wall or zone to select it (it highlights), drag it to move it, drag its corner handles to resize, or hit Delete/Backspace to remove it.
• Smart wall labels — length labels rotate to read along the wall instead of sitting flat on top of it, and automatically push further off short walls so tight, zig-zagging corners don't pile labels on top of each other.
• Zoom & pan — Ctrl+scroll or pinch to zoom toward the cursor, plain scroll or middle-click-drag to pan, and map-style +/− buttons in the bottom-right corner. Ctrl+0 (or the zoom% button in the toolbar) resets the view.
• Undo/redo — Ctrl+Z / Ctrl+Shift+Z (or Ctrl+Y) for anything you do: draw, move, resize, delete.
• Snap to grid — toggle on/off; everything rounds to the nearest grid line when it's on.
• Issue checker — an optional toggle that flags walls crossing each other and rooms overlapping, highlighting them in red so mistakes are easy to spot. Adjacent rooms that simply share a wall are correctly left alone.
• Settings — a gear icon opens units (feet/meters, meters by default with a true 1m grid), a theme switcher (the moody default Blueprint look or a clean Light theme), and Save/Load.

Getting started

npm install
npm run dev

That opens the app with hot reload. To build a production bundle instead:

npm run build

Tools

Tool	Sub-modes	What it does
Wall	Segment / Box / Polygon	Segment: click or drag one wall at a time, chaining automatically. Box: drag one rectangle for all 4 walls at once. Polygon: click each corner, click back near the start to close the loop.
Zone	Box / Lasso / Fill	Box: drag a rectangle. Lasso: click each corner, close near the start. Fill: click inside a closed loop of walls to auto-detect the room.
Select	—	Click to select, drag to move/resize, Delete/Backspace to remove.

Click Wall or Zone again to reveal its sub-mode picker — it remembers whichever mode you used last.

The issue checker (top toolbar) highlights problems like this in red, without blocking you from drawing:

Settings

Click the gear icon for units, theme, and Save/Load:

Blueprint is the default look, but Light is available for a cleaner, more standard feel:

Zoom & pan

Ctrl+scroll (or pinch) zooms toward the cursor, plain scroll or a middle-click drag pans, and the +/− widget in the corner works like a map app's zoom control:

Keyboard shortcuts

Shortcut	Action
Ctrl+Z	Undo
Ctrl+Shift+Z / Ctrl+Y	Redo
Delete / Backspace	Delete the selected wall or zone (Select tool)
Escape	Cancel an in-progress wall chain, box drag, or polygon trace
Right-click	Also cancels an in-progress chain/trace
Ctrl+scroll / pinch	Zoom toward the cursor
Scroll / middle-click drag	Pan the canvas
Ctrl+0	Reset zoom and pan

Tech stack

Electron + React + TypeScript, rendered with react-konva on an HTML canvas, bundled with electron-vite.