Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Character Sheet Development/Tools

From Roll20 Wiki

Jump to: navigation, search

These are tools for Character Sheet Development, recommended by the Sheet Author community. See Sheet Author Tips for related tips.

Contents

Sheet Sandbox

Using the Sheet Sandbox while editing/developing character sheets is much more effective and quicker than the normal Sheet Editor.

Alongside it, most authors use a text editor such as VSCode or Sublime Text.

Autouploader

Autouploader in action

Roll20 API and Sheet Autouploader is a Chromium extension that will automate the uploading of code to your Sheet Sandbox, created by Scott C..

This streamlines Character Sheet Development, removing the need to manually upload the files when you want to test changes. The extension will eventually work with API Development as well.


It should work on all chromium browsers except for Brave, which has disabled the chromium features that the extension relies on.





Code with a Proper Text Editor

Rather than using the built-in code editor, all sheet authors who do sheets with any regularity use a separate text editor meant for coding, as they makes things much easier, and have tons of features & extensions that are useful.

Some use an IDE, but due to Roll20 having a bunch of unique stuff, it's not really practical to test code locally. It's best to test the code live in a Sheet Sandbox, or the Sheet Editor.

It's quicker to edit & save code on your computer, then upload the new sheet version to the Sheet Sandbox through the menu, than editing & using the Sheet Editor.

Popular Text Editors(among sheet authors):



VS Code

Visual Studio Code(VS Code) is a popular text editor. It's free, and available for Windows/Linux/Mac, as well as accessible online through vscode.dev.

VS Code has some uses with Roll20, primarily for editing complicated macros, and for Character Sheet Creation.

Here are some useful VS Code extensions:

Roll20 Syntax Highlight

Showcase of Roll20 Macros

Roll20 Macros by Andreas J.

Extension to make roll20 macro and API command writing & troubleshooting easier. Highlight works when you use VSCode to view .rmacro-files.

Features:

  • bracket pairing & highlights
    • shows with colors which brackets/parentheses belong together(making mismatched brackets easier to find)
    • does this for roll20 macros syntax too (@{ }, ?{ }, %{ }, &{ }, $[[ ]])
  • syntax highlight
    • roll, macro & API commands (e.g. /r, !example, #dex)
    • in dice rolls, d & dF
    • some common keywords, like selected, template, %%NEWLINE%%
    • special characters used in macros (e.g. ~,|#=+, and HTML Entities)
  • Features: full summary

Roll20 Sheet Dev

Showcase of Roll20 Sheet Dev

Roll20 Sheet Dev by Andreas J.

Extension to help with Character Sheet Development.

Features:

Other Extensions


Browser Developer Tools

Using the Firefox dev tools to inspect live sheet code

Using the built in Web Dev tools in your browser helps a lot with figuring things out. Both Firefox & Chrome (others) have their own versions.

Open it: pressing F12 or Right Click anywhere & select "Inspect".

Code Validation

It's a good idea to use a validator to check your code for mistakes in your code. Many IDE & text editors can install such extensions automatically, but given that Roll20 does a few things their own way, by default a HTML validator would complain about lot of things that aren't wrong, but just isn't accepted as standard HTML, such as <button type="roll"></button>. See #VS Code for great plugins for this.

Other


See Also