← Works / Product / LoreSmith
★ CASE STUDY
2025
Case Study / Personal / 2025

LoreSmith.

A browser-based worldbuilding companion for fiction writers and tabletop RPG game masters.
Role
Solo — product, design, & engineering
Year
2025
Duration
3 months
Team
Solo
Tags
Product · UI/UX · Web App
hero · 16:9
00 — Intro

Loresmith solves a specific, painful problem: as a story grows, its lore becomes impossible to track in flat notes. Characters appear in two places at once, artifacts get destroyed then reappear, factions shift allegiances without record. Loresmith makes those inconsistencies visible before they become published mistakes. It's fully client-side and privacy-first — no login, no server, all data stored locally in the browser.

Web App
Platform
Local-first
Architecture
Next.js
Tech Stack
Live
Status
01 — The Problem

Long-form storytellers hit a continuity wall around the 40,000–60,000 word mark. The cast has grown, the timeline has branched, and the notes system — usually a tangle of Notion pages, Google Docs, sticky notes, and browser tabs — can no longer keep up. The core insight: worldbuilding isn't just text — it's relationships. A character isn't just a name and a description; they're linked to a location, a faction, a set of events, and other characters. Flat notes can't represent that structure. A relational tool can. Target audience: time-poor fantasy novelists and solo tabletop RPG game masters hitting continuity friction in their own work.

02 — Codex Interface
03 — Core Feature: Codex

A relational database for story entities. Five entity kinds: Character, Location, Faction, Artifact, Event — each with a shared base schema and kind-specific fields. Entities are linked to each other through the editor — when you @-mention an entity in the manuscript, Loresmith records an appearance. Explicit relationship edges can also be defined directly, independently of the prose.

Sidebar Index
Entity Card
04 — Core Feature: Constellation Map

A force-directed graph that renders all entities as nodes and all relationships as edges. The layout is computed deterministically from each node's ID (no random seed), so the map looks the same on every load without persisting coordinates. Nodes are colored by entity kind. A spoiler slider gates which edges are visible: edges are only shown if their chapterOrder is ≤ the reader's current chapter.

05 — Constellation Map
06 — Manuscript Editor & Viewer

A chapter-based rich text editor built on Tiptap. Writers compose prose in chapters, and as they @-mention entities inline, Loresmith silently tracks appearances in the background via a composite-key appearances table. It also includes a Spoiler-Safe Viewer — a read-only mode for reviewing chapters without triggering edit state.

07 — Editor Interface
08 — Architecture & Design

Built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS. Storage is handled fully locally via Dexie.js (IndexedDB wrapper). The visual language is "parchment on charcoal" — a dark ink base (#1a110a) with warm parchment text (#e8dcc4), amber accents, and five saturated-but-muted entity colors. Typography uses Lora (serif) for body and IBM Plex Mono for UI chrome. The combination reads as "a writer's tool" rather than a generic SaaS dashboard.

09 — Bento Grid
10 — Go-To-Market

Target channels were organic content on Reddit (r/worldbuilding, r/writing) and an Instagram/TikTok carousel. All marketing assets were rendered via a Python + CairoSVG pipeline using the same design token palette as the app. No Figma, no external design tools — everything generated programmatically.

11 — Key Decisions & Tradeoffs

• **No login, no cloud sync**: Removes early-stage friction and protects privacy. • **Unified entity table**: Migrating to a single entities table made queries simpler. • **Custom force layout**: Built a 120-line deterministic layout instead of importing an 80kb D3 dependency. • **Derived appearances**: Appearances are tracked via @-mentions automatically, saving manual entry.

Next project
StudioDesk →
Product · Branding
© 2026 Khanh Nhat Nguyen · KeiWorld of KeiSingapore · UTC+8

Create a free website with Framer, the website builder loved by startups, designers and agencies.