D&D 5e Spellbook

A web app for browsing D&D 5e spells. Built with Svelte 5, Vite, and Tailwind CSS.

Screenshots

Desktop

Spell list with search and filters

Detailed spell view with markdown

Mobile

Responsive spell list

Spell details with back button

Features

Light, dark, and system theme options

Cache stats widget

Features

• Browse all spells from the D&D 5e API
• Search by name
• Filter by spell level or class
• View detailed spell information with markdown rendering
• Light/dark theme (or use system preference)
• Caching to avoid hammering the API
• XSS protection with DOMPurify sanitization
• Works on mobile and desktop

Setup

You need Node.js (v16+) and Bun.

# Install dependencies
bun install

# Run dev server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

Project Structure

src/
├── lib/
│   ├── CacheStats.svelte   # Cache stats widget
│   ├── Filters.svelte      # Search and filter controls
│   ├── SpellDetail.svelte  # Spell detail view
│   ├── SpellList.svelte    # Spell list
│   ├── ThemeToggle.svelte  # Theme switcher
│   ├── api.svelte.js       # API calls
│   ├── cache.svelte.js     # Caching
│   └── markdown.svelte.js  # Markdown rendering
├── App.svelte              # Main app
├── app.css                 # Global styles
├── main.js                 # Entry point
└── types.svelte.js         # Type definitions

The code follows single responsibility principle - each file does one thing. Components handle UI, utilities handle logic.

Tech Stack

• Svelte 5
• Vite 7
• Tailwind CSS 4
• marked.js (for markdown rendering)
• D&D 5e API

How It Works

Caching

API responses are cached in memory to avoid rate limits:

• Spell lists: 10 minutes
• Spell details: 15 minutes
• Class list: 30 minutes

There's a little cache stats widget in the bottom-right corner if you want to see what's cached.

Themes

You can pick light mode, dark mode, or just use your system preference. Your choice gets saved in localStorage.

Code

Uses JSDoc for type hints instead of TypeScript. Each module has a single responsibility - API stuff in api.svelte.js, markdown rendering in markdown.svelte.js, etc.

TODO

• Caching Improvements

  • Cache class list in localStorage
  • Cache basic spell list in localStorage
  • Cache detailed spell data as users browse
  • Add offline mode with cached data indicator
  • Add manual refresh button to force cache update

• Features

  • Add spell favorites/bookmarks
  • Export spell lists to PDF/print

• Infrastructure

  • Docker setup for self-hosting

Credits

Spell data from D&D 5e API. D&D is owned by Wizards of the Coast.