Isometric Room Builder
Place blocks on an isometric grid and build a little room.
IntermediateWeb appGame12–24hAI-buildable 4/5no setupworth shipping
An isometric grid you can place, stack and remove tiles on. The whole project rests on getting the coordinate transform right — screen position to grid cell and back — plus the depth sorting that makes stacked objects overlap convincingly.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- An isometric grid renders with correct tile geometry
- Clicking a cell places the selected tile type
- Tiles stack vertically and render with correct depth ordering
- A palette selects between tile types
- Right-click or a remove mode deletes a tile
- The hovered cell highlights accurately under the cursor
- The layout persists across reloads
The interesting part
- Screen-to-isometric coordinate conversion, especially with stacked height
- Depth sorting so tall objects occlude correctly
- Accurate hover detection on diamond-shaped cells
Once it works
- Add camera rotation in 90-degree steps
- Export the scene as an image
- Add simple lighting or shading per face
Suggested stack
reacttypescripttailwindcanvas-api