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.
On This Page
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
- Buttons that Create Other Buttons
- Things You Might Not Know About The Disabled Attribute
CSS
The styling of a character sheet.
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.
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.
