2019 - PresentOpen Source Tool

RPG Card Creator

Interactive Browser-Based Tool for Designing & Exporting Tabletop Cards

Live Application
RPG Card Generator Web App
zavian.github.io/generator/generate.html
JavaScriptHTML5 CanvasCSS3jQueryBootstrapJSON Export

Tabletop games often require quick physical or digital reference cards for custom items, magical spells, and NPC abilities. Existing tools were either bloated, behind paywalls, or lacked export formats optimized for digital VTTs.

RPG Card Creator was built as a lightweight, dependable client-side application adapted from crobi's card generator. It allows users to write formatted text with BBCode tags, select rarity borders, configure stats, and instantly render formatted cards in real time.

The tool handles canvas-based rendering and DOM-to-image exports, ensuring cards print at crisp 300 DPI or export as formatted asset decks ready to be dropped into Tabletop Simulator.

BBCode & Tag Formatting

Supports custom inline formatting tags including bold, italics, bullets, colored text, and dynamic stat badges to cleanly separate content semantics from styling.

Tabletop Simulator Deck Sheets

Stitches multiple generated cards into custom 10×7 matrix deck sheets formatted specifically for automated importing into Tabletop Simulator and digital VTTs.

High-Resolution 300 DPI Print Export

Renders print-ready single cards and multi-card sheets at exact physical card dimensions (2.5×3.5 in) with clean cut lines and color profiles for tabletop home printing.

Client-Side Local Storage & JSON

All card decks and item libraries persist locally in browser storage with full JSON import/export capabilities, allowing seamless backups without account requirements.

Technical Challenges & Solutions

Text Fitting & Font Metrics: Accurately calculating text bounds and automatically scaling description typography so lengthy lore doesn't overflow card borders.
Cross-Browser Canvas Export: Ensuring clean alpha channel handling and accurate color profiles across Firefox, Safari, and Chromium when exporting high-res images.