I’ve been playing Blades in the Dark with my family and some friends this year, and it is a ton of fun. I’m sure you’ve heard of Dungeons and Dragons, probably the most iconic entry in the tabletop role-playing category — Blades is a little like that. The gameplay is a bit simpler, using only d6 dice, and the world is much darker and more supernatural-oriented. That’s not to say it can’t still be lighthearted, though.

One big limitation is the character sheet: there’s a static PDF designed to be printed and filled out by hand, and there’s also a PDF form that can be saved on a computer. Because a few of our party are from out of town, and of course COVID-19, we play over voice chat instead of at a physical table, so most of us started out with the PDF on our computers. It works, but a lot of the clickable elements aren’t well aligned with the graphical elements, so we end up often having to click the next thing over from what we want to interact with. Some of them are completely disconnected from each other, with tiny clickable areas that control something somewhere else on the sheet. It’s usable but not user-friendly.

That’s where my programming experience comes in! I decided to create my own character sheet for Blades in the Dark using Vue.js. It’s deployed right now on Cloudflare Pages at doskvol.pages.dev, and we’ve been using it for the last few game sessions. It has some limitations of its own, most notably that it only saves character data using localStorage since there is no backend (yet), but it is a big step up from the PDF character sheet.

I have much more planned for this project in the future, but for now, it’s already a significant upgrade from what we were using before. If you want to see how it’s put together, feel free to check out the source code at Github.