Getting Started (For Users)
Relevant source files
The following files were used as context for generating this wiki page:
This guide provides an overview of the Character Sheet Maker, a "Local-First" web application designed for creating, personalizing, and exporting character sheets for any tabletop role-playing game. The application is system-agnostic, meaning it is not tied to any specific set of rules like D&D or Pathfinder, giving you complete freedom over your sheet's design. All your work is automatically saved in your browser's local storage.
The core of the application is the Editor, a flexible drag-and-drop interface where you can add, arrange, and style various content blocks to build your sheet. This document will walk you through the main components of the editor and how to use them to create your custom character sheet.
Sources: README.md, src/store/useSheetStore.ts:153-155
The Editor Interface
The editor is the main workspace and is divided into three primary sections: the Top Bar for global actions, the Tools Sidebar for adding content, and the Canvas where you build your sheet. The sidebar can be collapsed to maximize the canvas area.
Sources: src/pages/Editor.tsx:8-27
This diagram illustrates the main layout of the editor page.
Sources: src/pages/Editor.tsx:11-25
Top Bar: Global Actions
The Top Bar, located at the top of the screen, provides access to sheet-wide settings and actions, including navigation, renaming, exporting, and changing the color theme.
Sources: src/components/layout/TopBar.tsx
Sheet Title
You can rename your character sheet by clicking on the title next to the "CS" logo. It's an input field that appears as plain text until you hover over it.
Sources: src/components/layout/TopBar.tsx:24-28
Exporting Your Sheet
The "Export" button opens a dropdown menu with options to download your character sheet as a high-quality PNG image or a standard A4 PDF document.
The export process involves converting the HTML canvas element (#rpg-sheet-canvas) into an image and then triggering a download or embedding it into a PDF.
Theme Toggling (Light/Dark Mode)
A Sun/Moon icon button on the right side of the Top Bar allows you to toggle the entire application interface between light and dark modes. This preference is saved in your browser's local storage.
Sources: src/components/layout/TopBar.tsx:52-58, src/hooks/useTheme.ts:16-20
Tools Sidebar: Building Your Sheet
The Tools Sidebar on the left is your main palette for adding content to the character sheet. It contains options for changing the sheet's aesthetic theme, adding various types of content blocks, and controlling the grid behavior.
Sources: src/components/layout/ToolsSidebar.tsx
Sheet Styles (Themes)
You can instantly change the entire look and feel of your character sheet by selecting a theme. Each theme applies a unique set of fonts, colors, and styles to all blocks on the canvas.
| Theme Key | Display Name | Description |
|---|---|---|
simple | Modern Clean | A clean, modern design using "Inter" font and blue accents. |
medieval | Ancient Scroll | A fantasy-inspired design with "Cinzel" and "Crimson Text" fonts. |
cyberpunk | Neon Future | A sci-fi look with "Orbitron" font, skewed elements, and neon pink accents. |
Sources: src/lib/themes.ts:25-110, src/components/layout/ToolsSidebar.tsx:102-122
Adding Content Blocks
The sidebar provides a list of tools to add different elements ("blocks") to your canvas. Clicking any of these buttons will add a new block of that type to the first available space on the grid.
The following diagram shows the user flow for adding a new block.
The table below lists the available block types.
| Category | Block Tool | Block Type | Description |
|---|---|---|---|
| Text | Big Title | header | A large, level 1 heading. |
| Subtitle | header | A smaller, level 2 heading. | |
| Paragraph | text | A multi-line text area for descriptions or notes. | |
| List | list | A bulleted list where you can add/edit items. | |
| Content | Image | image | An area to upload an image. |
| Input | form-box | A labeled input field, suitable for stats or attributes. | |
| Divisor | divider | A horizontal line to visually separate sections. | |
| Shapes & Groups | Group Container | container | A visual container to group other blocks, rendered in the background. |
| Square | shape | A decorative square shape. | |
| Circle | shape | A decorative circle shape. |
Sources: src/components/layout/ToolsSidebar.tsx:126-166, src/store/useSheetStore.ts:30-31
Physics (Grid Compaction)
At the bottom of the sidebar, the "Physics" section controls the grid layout behavior.
- Free Mode (OFF): Blocks can be placed anywhere, and they will not move other blocks. This allows for overlapping.
preventCollisionistrue. - Gravity On (ON): The grid becomes "compact". Blocks will automatically shift upwards to fill empty space, preventing vertical gaps. This is useful for creating tightly packed layouts.
compactTypeisvertical.
Sources: src/components/layout/ToolsSidebar.tsx:171-201, src/components/sheet/Canvas.tsx:40, 42
The Canvas: Arranging Your Content
The Canvas is the main, central area where your character sheet takes form. It is a grid-based layout where you can freely move, resize, and edit the content blocks you've added from the Tools Sidebar.
Sources: src/components/sheet/Canvas.tsx
The Grid System
The canvas uses a responsive grid layout. You can drag blocks to reposition them and use the handle in the bottom-right corner of a block to resize it. A visual grid background can be toggled on and off using the "Show/Hide Grid" button at the bottom-right of the page.
Sources: src/components/sheet/Canvas.tsx:19-25, 36-44
Interacting with Blocks
Each block on the canvas is interactive.
- Editing: Most blocks, like headers and text areas, can be edited directly by clicking on them and typing.
- Deleting: When you hover over a block, a small 'X' button appears in its top-right corner. Clicking this button will remove the block from the sheet.
- Moving & Resizing: Click and drag any part of a block (that isn't an input field) to move it. The resize handle is in the bottom-right.
The following diagram shows the sequence of updating a block's content, such as typing a character's name into a header block.
Block Rendering
Each block type has a unique renderer that determines its appearance and behavior, all of which are styled according to the currently selected sheet theme. For example, a form-box block is rendered with an editable <input> for its label and a <textarea> for its value, while a divider is just a styled <div>.
Sources: src/components/sheet/BlockRenderer.tsx:32-198
Conclusion
The Character Sheet Maker provides a user-friendly and powerful set of tools for creating custom RPG character sheets. By combining the various content blocks from the Tools Sidebar, arranging them on the Canvas, and styling them with Themes, users can design a sheet that perfectly fits their game and character. The final creation can be easily exported as an image or PDF for printing or digital use.