This is a guide to creating character sheets in Roll20, intended for people who aren’t programmers or web designers. This covers every aspect of character sheet creation, with the tips focussed specifically on Roll20 design.
It’s divided into the different topics. Also, check out Andreas’s Guide for another overview of things.
Make sure to click each heading for more information on a topic.
Table of Contents
The Basics
These three sections cover the basics of sheet authoring. You need some familiarity with these three things.
HTML
The elements that form the foundation of a character sheet.
- Headings and Line Breaks
- Inputs and Attributes
- Displaying Text – span & textarea
- Containers – div, section, details
- Choosing from a List – select, datalist
- Conditional Inputs – checkboxes, radios, labels
- Using Buttons to Make Rolls
- HTML Images
- HTML Fundamentals
- Character Sheet – HTML Example
Extra Posts
CSS
The styling of a character sheet.
- Getting Started With CSS
- How Elements are Displayed
- Images and Colours
- Text and Fonts
- CSS Grid Layouts
- Understanding Selectors
- How To Hide and Reveal Things With CSS
- Inheritance and Specificity
- Your Own Styles on Roll20
- Advanced Positioning
- Character Sheet – CSS Example
Extra Posts
Meta
This covers articles about sheet authoring on roll20, and transcends specific languages.
- The Custom Sheet Sandbox
- Use a Syntax-Aware Code Editor
- Validating Your Sheet
- Inspecting the Browser
- Publishing Sheets to GitHub
- Publishing Sheet Images
- Default Sheet Settings
- Sandbox Sheet Glitches
- Divitis and Style
- Why You Must Test Roll20 Sheets on Roll20
- Can a Sheet Be Modified?
- Character Sheet Corruption Will Happen!
- Translating Default Sheet Settings
- Using ChatGPT for character design
- The Case Against Pug (and Sheet Templating generally)
Advanced Skills
These cover skills that many sheets will need once you have mastered the basics. Remember to click the heading for extra posts that are useful (sometimes extremely useful), but not fundamentel.
Sheet Workers
Powerful automation for your sheet, using JavaScript with some quirks.
- Anatomy of a Sheet Worker
- Variables – How to Name Things
- Arithmetic in Sheet Workers
- What If? in Sheet Workers
- Arrays and Dropdowns
- JavaScript Objects
- Getting Loopy With JavaScript
- Strings in Sheet Workers
- Logging in the Browser Console
- Strings, Arrays, and Loops
- Undefined and Other Error Values
- Asynchronicity and Things to Avoid With Loops
- Events, and watching Attributes
- Changes and the eventInfo Object
- Action Buttons
- setAttrs and Saving Attributes
- A Sheet Worker Reprise
- Castle Falkenstein Design – Sheet Workers
Repeating Sections
Dynamic sections of your sheet like equipment lists, spells, and weapon lists. Requires HTML, CSS, and sometimes JavaScript.
- What Is a Repeating Section?
- Repeating Section Names
- Building a Repeating Section (HTML)
- Styling a Repeating Section (CSS)
- Styling the Section Buttons (CSS)
- Simple Repeating Sections
- Less Simple Repeating Sections
- The One Line Repeating Section
- Combining Repeating Sections and Global Stats
- Advanced Action Buttons
- Undo in a Repeating Section
- Repeating Section Gotchas
- A Summary of Repeating Sections
There are important extra articles at the dedicated page. Click the title above.
Roll Templates
How rolls appear in chat, roll templates require HTML and CSS. They can sometimes benefit from Sheet Workers (JavaScript).
Optional Skills
These articles cover things that are nice to add to a sheet, but which you can do without.
Custom Roll Parsing
Requires HTML, CSS, Sheet Workers, and Roll Templates, and sometimes Repeating Sections. Very complex, but there are some things you can’t do any other way.
- Introduction to Custom Roll Parsing
- The Structure of a Custom Roll Parsing Function
- The CRP Roll String And Many Buttons
- CRP: A Simple Example
- startRoll and Analysing Your Dice
- Changing Attributes with Custom Roll Parsing
- Using Queries in Custom Roll Parsing
- Computed Properties and CRP Roll Templates
- Callbacks and Promises with startRoll
Translations
Making one sheet work in multiple languages. Its very tedious to set up, but a lot simpler with Templating (see below).
Templating
Designing a sheet which designs itself.
- What Is Character Sheet Templating?
- The Case Against Pug (and Sheet Templating generally)
- Setting Up The Handlebars Character Sheet Generator
- Basic Templating with Handlebars
- Handlebars Templating: Things Get Complex
- Handlebars Templating: What are Helpers?
- Handlebars Templating: When You Want to Stop Handlebars
- Handlebars Templating: Nesting in All Its Forms
- Handlebars Templating: Handling Generator Errors
- Handlebars Templating: Helpers
- Handlebars Templating: Partials
Examples and Other Optional Articles
This section expands on existing guides, or provides alternative condensed guides.
CRP Examples
Here are a bunch of examples showing how to use CRP.
Design Patterns
Useful tools and techniques that cross multiple disciplines and don’t fit neatly into a reference post.
More Speculative Stuff
These are things which are only added to a sheet in certain cases, and might not even be possible in come cases. These will probably be created eventually and slowly (but I have some other massive projects in mind that might consume my time).
Charactermancer
A charactermancer is only possible if you have the license for the system. I’ll probably write it up eventually, but its not a high priority.
jQuery in Roll20
Coming one day (probably – it’s turning out to be less useful than originally envisaged, but Roll20 did state improvements were coming).
Compendium
Custom Compendiums are something Roll20 have said will be available, but they do not exist yet. If they do become available, I’ll add instructions here.
