Hexer — Hex Map Editor for Tabletop RPGs

Challenge

Game masters who run hex-crawl campaigns need a map they can actually play from — one that hides what the players haven't discovered, tracks travel across terrain, and can be shared live during a session. Existing tools tend to be either general-purpose drawing apps with no game logic, or virtual tabletops where the map is an afterthought.

Hexer is my answer to that, built and operated as a solo product. That meant the scope was never just the editor: it also had to be an account system, a billing system, a deployment pipeline, and a test suite I could trust to change things quickly without a second pair of eyes.

Approach

The application runs on Astro 6 with server-side rendering and a Node standalone adapter, with React 19 for interactive surfaces and the React Compiler handling memoisation. The map editor itself is not React — it is a PixiJS 8 canvas with more than twenty composited layers, because a hex grid that repaints on every brush stroke needs direct control over rendering rather than a virtual DOM.

Client state lives in Zustand across ten focused stores, with zundo providing stroke-batched undo across twenty steps. Supabase supplies PostgreSQL, authentication and realtime; Stripe handles subscriptions. Hex geometry uses honeycomb-grid with pointy-top, odd-r offset coordinates, and region borders are computed with polygon clipping.

My Role

Everything — architecture, implementation, infrastructure, billing, and support. The product covers:

Editing: 35 terrain types and 55+ hex features, brush painting with size control, a path tool, a region tool with computed polygon borders, and a note tool using Tiptap in floating, resizable windows.

Game systems: a bitfield-based fog-of-war engine with burn animation and parchment texture, a dynamic line-of-sight vision system, a travel tool with movement costs and a travel heatmap, and multi-layer Underdark support across four depths.

Procedural generation: simplex-noise world generation with biome rules and transition post-processing, plus dedicated cave, river (including confluence and floodplains) and road generators.

Platform: Supabase auth with httpOnly cookie sessions, CSRF protection and rate limiting; the full Stripe lifecycle including checkout, webhooks, 7-day trials, grace periods and a self-service billing portal; transactional email via Resend; and export to JSON, SVG, PNG, Universal VTT/DD2VTT, Hex Key and Foundry VTT.

Technical Highlights

Layered canvas rendering. The editor composites more than twenty PixiJS layers — terrain, features, paths, regions, fog, vision, cursors — so that each can be redrawn independently. Maps up to 200×200 hexes stay responsive because a brush stroke only invalidates the layers it touches.

Fog of war as a bitfield. Explored state is stored as packed bits rather than per-hex objects, which keeps the payload small enough to persist on every autosave and to diff cheaply when deciding what a player is allowed to see.

Real-time multiplayer over SSE. Live cursors and freehand drawing are broadcast through a server-sent events presence hub, with a strict separation between the DM view and the player view so fog and private notes never reach the client that shouldn't have them.

Tests as the safety net for a solo project. Over 380 test files across Vitest unit and integration suites and Playwright E2E specs, holding roughly 80% statement coverage, with a pre-commit hook that blocks any new source file arriving without a matching test. Working test-first — with Claude Code as a pair-programming tool — is what makes it possible to ship features at this pace without a review partner.

Result

Hexer runs in production at hexermap.com with free and paid tiers and a complete payment lifecycle, deployed through GitHub Actions to Azure behind a Caddy reverse proxy with TLS and HTTP/3. It is the project where I own every decision end to end — product, architecture, code, infrastructure and the customers who write in when something breaks.