Page Updated:   2021-10-03

This is about a Roll20 feature exclusive to Pro-subscribers (and often to players in a Game created by a Pro-subscriber). If you'd like to use this feature, consider upgrading your account.

Main Page: Building Character Sheets

Using Custom Character Sheets

There are two methods of using Custom Character Sheets, The "The Sheet Editor", and the "Sheet Sandbox".

The former is accessed and used in campaign where the character sheet option have been set to "Custom" in the Game Settings page, and the latter is a tool used for character sheet development, where you upload your code as files. Either one can only be accessed by the Creator of the game.

Find Code

The sourcecode to all community-created Roll20 sheets can be found on Github. The code for each sheet are organized in folders, and each sheet consists of a .html-file, a .css-file, and possibly a translation.jsonfile located in the root folder for the sheet. There are also other files there, but those are optional files used for sheet development, and not needed when using custom sheets in a game.

To get the code:

• download the files and copy the code from the files when you paste them to the correct sections in the Sheet Editor,
• or navigate to the individual file's page on github, and press on the "show raw" button, and press ctrl+A(select all), then ctrl+C to copy, and then go to the Sheet Editor and ctrl+V to paste the code in the corresponding tab.

The latest code for Official Roll20 sheets (those with a by Roll20 in their name ) in the "character sheet template"-dropdown aren't unfortunately public, but for some of them, an older version(from March 2020) can be found:

(Old) sourcecode for "by Roll20"-char sheets:

• D&D 5E by Roll20 - code: D&D 5E by Roll20 | (very outdated)
• Pathfinder Second Edition - code: Pathfinder 2E by Roll20 | (very outdated)
• Pathfinder by Roll20 (1E) - code: Pathfinder by Roll20 | (mostly up to date)
• Starfinder by Roll20 - code: Starfinder by Roll20 | (mostly up to date)
• Gumshoe by Roll20 - code: sourcecode | unknown

The Sheet Editor

To use a custom character sheet in an existing game:

1. Go to a Campaign's/Game's Details Page.

2. Click the Settings-button, and select Games Settings.

3. On the Game settings page, you select "Custom" from the Character Sheet Template menu.

Check the box if you want to use (older) legacy code.

4. If you want to use char sheet code that made prior March 2021, check the box for Legacy Sanitization. If you leave it unchecked, you can use code compatible with the Character Sheet Enhancement Update.

The 4 tabs of the Sheet Editor. Remember that the Preview-tab is almost never accurate.

The editor (shown below) has four tabs: HTML Layout, CSS Styling, Translation, and Preview.

You copy your and css to their respective tabs, and if the sheet have a translation files, you copy the content of the default translation file(usually English), or for the language you want.

The scroll down the page and press the Save Changes button.

Example of a character sheet template, missing it's translation file. Cepheus Atom

Common Mistake: If the sheet needs the translation file, and you don't copy it to your game, all/most text on it will show red text and the name of the language tag for each section, as seen in the example.

Preview Panel

The "Preview Panel/Sheet Editor" showing a preview of a character sheet. This preview is not identical to how the sheet looks in Roll20, and is only an approximation.

Warning: The preview panel does not have all the behavior of an actual roll20 instance. Sheet worker scripts and other JavaScript based features (including repeating sections) will not work correctly in the Preview.

The preview panel updates in real-time whenever you change the HTML, CSS or "Translation" of your sheet, to show you an approximation of what sheet would look like in-game. It's useful for quickly checking superficial change while you're editing, but to be sure of the actual end-result, you need to enter the game and open the sheet itself.

The Preview panel applies all the same security precautions and filtering as the main Roll20 application. Be sure to right-click and Inspect Element if you are seeing strange behavior (e.g. your styles aren't being applied correctly) -- it may be that there is a security filter that is changing the name of a class or something similar.

If you make any changes in the character sheet editor while in the game, you must save your changes and refresh the active Roll20 game. In addition, if the character sheet contains <rolltemplate>, the code for it will be seen unprocessed in the preview window. It's recommended that roll templates are placed at the end of the sheet's code so they don't obscure the sheet's visuals when using the preview panel.

Editing Sheet Code

Building Character Sheets is the central page detailing how the Roll20 Character sheet code works, what components it consists of, examples and so forth. The page links to every relevant page, as does the sidebar here.

The Community Wiki articles on Building Character Sheets is much more comprehensive than the Help Center-pages. (Andreas J. (talk) 12:29, 5 May 2021 (UTC))

When testing sheet code, it's smart to use the Sheet Sandbox, instead of the normal Sheet Editor, as the Sheet Sandbox is designed for streamlining custom sheet testing, and is overall quicker to use.

Only drawback with Sheet Sandbox is that you can't inviting other people to test, so you'd need to make a normal game if you want others to test the sheet.

See Also

• Character Sheets - general info
• Game Management
  • Add Character Sheets
• Building Character Sheets - coding
  • Common Mistakes
  • Code Restrictions
  • Sheet Author Tips
• Pro-subscription