D&D Character Sheet

An editable web-based character sheet for Dungeons & Dragons, designed to match the visual style of printed character sheets with a fantasy aesthetic.

Features

• Fully Editable: All fields are editable directly in the browser using contenteditable
• Auto-Save: Changes are automatically saved to localStorage
• Character Art Upload: Upload and display character artwork
• Print Support: Clean print output with decorative borders preserved
• Export/Import: Save character data as JSON for backup or sharing
• Fantasy Styling: Decorative borders, fantasy fonts, and parchment aesthetic

Development

Prerequisites

• Bun runtime

Running the Dev Server

bun run dev

This starts a development server at http://localhost:3000 with live reload - any changes to files will automatically refresh the browser.

Project Structure

dnd/
├── index.html      # Main character sheet application (single-file)
├── server.ts       # Bun development server with live reload
├── package.json    # Project configuration
└── README.md       # This file

Usage

Editing Fields

Click on any field to edit it. Fields include:

• Character name, race, class, level
• Ability scores (STR, DEX, CON, INT, WIS, CHA) and modifiers
• Proficiency bonus, speed, saving throws
• Abilities, skills, and spells
• Weapons with to-hit and damage
• Armor Class and Hit Points
• Equipment and treasure

Character Art

Click "Upload Art" in the toolbar to add a character image. The image is stored in localStorage as a data URL.

Saving & Loading

• Auto-save: All edits are saved automatically to localStorage
• Export JSON: Download character data as a JSON file
• Import JSON: Load character data from a JSON file
• Reset: Clear all data and restore defaults

Printing

Click "Print" or use Ctrl/Cmd+P. The print stylesheet hides the toolbar and removes edit highlights for a clean output.

Customization

The character sheet is a single HTML file with embedded CSS and JavaScript. To customize:

• Fonts: Uses Google Fonts (MedievalSharp, Cinzel, Crimson Text)
• Colors: CSS custom properties in :root (--parchment, --ink, --accent)
• Layout: CSS Grid for responsive sections

Credits

Based on the D&D character sheet design for "Clover Quickfoot" - a Rabbit Ranger.