← ALL DEVLOGS
Devlog 2026-07-07

TTRPG Toolkit: Devlog #3 - My Tabletop RPG App Making Adventure Part 3

From Four Images to a Living Shop System. The Shoppes began as a very simple thing: a row of four fantasy shop images that flipped between a signboard and a price list on click.

From Four Images to a Living Shop System

Sometimes the tools I build for the table start smaller than the tools I end up needing. The Shoppes began as a very simple thing: a row of four fantasy shop images that flipped between a signboard and a price list on click. That was it. A little hover animation, a warm parchment aesthetic, one HTML file. It solved a specific problem. I wanted a way to show players a shop without pulling them out of the moment to consult a spreadsheet.

That was the seed. Everything since has been about pulling on threads that seed exposed.

From Gallery to Navigation

The first real expansion added cities, districts, and a slide-in menu so a single gallery could represent a whole trade network. Then the shops needed contents, not just signs, so I introduced CSV-driven inventories with rarity, price, and stock weights. That still felt too static, so I added a "roll the shop" mechanic that generates a snapshot of what's actually on the shelves today, weighted by how often each item would plausibly show up. Somewhere along the way it stopped being a gallery and started being a small system.

The Master Catalog Shift

The bigger shift came when I moved from per-shop inventories to a master catalog, where every item declares which types of shops can carry it. General Store, Blacksmith, Magic Shop, Food & Alchemy Ingredients, plus any custom types I want to define. One item, many shops. Import a spreadsheet of 1,000+ items and the app figures out which ones go where. That's the version I'm actually using at the table now.

Wealth, Locks, and Roll Control

Then came the polish tier. Shop wealth in four levels, biasing rolls toward rarer items in Wealthy and Rich shops without breaking the game. Per-item locking so I can keep the Bag of Holding in stock across re-rolls. A search-and-add flow for manually stocking items. Category-spreading logic so a roll doesn't just dump 15 items from the same section. A visual system where rarities are color-coded at a glance.

Real Files on Disk

The biggest architectural leap was moving data off the browser and onto disk. The Shoppes now uses the File System Access API to keep everything in a folder I pick. shops.json, catalog.csv, images/, all as real files I can version-control, sync via cloud, or edit in Excel. Auto-saves every couple of seconds. Reopens where I left off.

It's still one HTML file. Still no build step, no server, no accounts. But it can now handle a full campaign's worth of merchants across a whole world.

What's Next

The next stretch of work is toward player-facing views and integrations with the rest of the D&D Toolkit ecosystem. The goal is that when I'm prepping a session in the D&D Toolkit, I can hand a shop URL to a player and they see exactly what's on the shelves that night.