Custom Statblock Templates

Guild Exclusive

This is a Grandmaster+ feature. To get access, Join the Worldbuilder's Guild!

An RPG block is a small piece data that displays information about an element of a role-playing game. It can be a character sheet, the statistics of an NPC/creature, or the properties of an item. In this guide, you will learn how to create new templates for RPG blocks. This feature is quite complex, but it also allows a great deal of flexibility and it can be used for any system.
Important note: this is not about how to create blocks and use them in articles, but about how to make your own custom block types. Please see Guide to blocks for the former.

Getting started

Follow these steps to get started with your first block!

1. Make sure that you have selected an RPG system for your world. Any block template you create will be for one of the systems you have chosen for your world. You can set your world's RPG system from your world configuration.
2. Click on the Studio option at the top menu bar, and choose Sheets & Blocks.
3. On the right side of the page, you will see buttons to create sheets for your selected systems:

In this guide, we will be creating and designing a character sheet for FATE Accelerated.

Basic configuration

Basic details

When you click on the create button, this page will open:

Enter the name of the block you are creating (e.g. "Character Sheet") and the description of the block (i.e. what's its purpose). If you check the JSON importer checkbox, people creating blocks from your template will be able to import blocks using JSON syntax. We have kept it unchecked in the example to avoid making it too complicated.
After filling both fields, click on the Create Template button!

Parts configuration

Important Note If you are planning to create a custom form you won't need anything more than the name for each part, so just add the name and leave the type as one-liner string

This page allows you to define the fields of your block. By default, the field Name is already configured as a required parameter and you can't edit it. To add a new field, use the form:

The only required information you need to provide is the name of the field. However, it's recommended you also add a description for the parameter and an example, so that people using the template know what the field is about. The right sidebar of the Parts configuration page contains a list and an explanation of all parameters.
Click on the Add template part button and the field will be saved. Repeat until you have entered all the field you need for the block. Don't worry about the design yet, for now just keep adding fields.
When you are finished, click on the Switch to display mode button you have at the top right corner of this page:

Display mode

In this page, you can design the block itself, how it will look when you create one. There are five text boxes:

Display structure

Use this box to specify how should the different parts of the sheet be displayed. You can arrange columns, headers, lists, and other elements using HTML and TWIG.

Styling sheet

Using CSS, you can make the sheet have a style that is more appropriate to the game or RPG system. This field has some limitations, currently. Mainly, using characters such as parenthesis () and commas (,) is not allowed (the CSS will not work). Also, do not use .user-css as a selector (as you would do in your world CSS), because the CSS will not be applied either. Make sure to choose unique class names for your HTML elements to avoid interferences between your custom CSS and the global World Anvil CSS.

Badge structure

This section, which also uses HTML and TWIG, can be used to design a shortened version of the sheet. By default, it will show in the sidebar of character journals.

Trackable form

Using HTML and TWIG, you can design a form that will allow your players to modify their character sheets/blocks from the view interface. Note that anyone with access to the article will be able to make modifications, so be careful!

Edit form

You can use this box if you want to change the layout of the edit interface for your block. This is an extremely advanced functionality, and we recommend not using it if it's not essential for the block.

Let's build a sheet!

This section is a step-by-step tutorial on how to create a basic character sheet. We will choose an RPG system with a simple character sheet: FATE Accelerated.

1. Creating the structure

World Anvil uses Bootstrap, which means that you can benefit from all bootstrap classes. This can be really useful, especially because you won't need to use CSS to create responsive columns (this is probably the most common application of this framework when creating RPG blocks).
All columns in Bootstrap must be enclosed inside a row class. Each row can have up to 12 columns, and you can either make the columns to be of equal width or to specify the exact width (using column numbers). For example, the following code will make three columns of equal width:

<div class="row">
 <div class="col-md">
 Column 1 content
 </div>
 <div class="col-md">
 Column 2 content
 </div>
 <div class="col-md">
 Column 3 content
 </div>
</div>

The -md suffix after col means that the columns will be applied to medium devices and larger. In order to specify the width of a column, use another suffix with a number, like in this example:
<div class="row"> <div class="col-md-9"> This column is as wide as nine single columns. </div> <div class="col-md-3"> This column is as wide as three nine single columns. </div> </div>

Of course, all regular HTML tags, like <h2></h2> and <b></b>, as well as custom classes, are also supported. In order to add the actual contents of the character sheet, we will need to use TWIG. Take a look at the quick TWIG reference in the sidebar!

The FATE Accelerated sheet has two columns of different width with a central box that takes the whole row. Each field is placed inside a box with a small gray label to identify the field. In order to do these boxes, we can use the following code:

<h2>Header</h2> <div class="fate-box"> <div class="fate-box-title">Box label</div> <div class="fate-points-number">Box value (using TWIG)</div> </div>
However, if you paste that code in the box without anything else, it won't look like we want it to. In order to give it proper styling, we need CSS.

See full character sheet

Jon Snow Smith

Jon Snow Smith is Lord Commander of the Night's Watch and a White Walker in disguise.

Aspects

High Concept

Lord Commander of the Night's Watch.

Trouble

I know nothing, or that's what my wildling girlfriend kept saying.

It's best to keep your enemies close.

Sometimes there is no happy choice, only one less grievous than the others

Don’t call me Lord Snow.

Refresh

4

Current Fate Points

3

Approaches

Careful

Clever

Flashy

Forceful

Quick

Sneaky

1

0

3

2

2

1

Stunts

Because I had a wildling girlfriend, it's easier for me to talk with them without them killing me on sight.

Stress

Stress score:

4/3

Consequences

Mild Consequence

whoa

Moderate Consequence

It's

Severe Consequence

test

2. Style it!

You can choose to leave the CSS box empty. In this case, the default CSS theme for the world will be applied to the sheet. This option is not recommended, as different worlds can have different themes, so the sheet might look bad in certain worlds.
With CSS, you have a great deal of control over the style of the block. There currently are some limitations, such as the fact that you can't import fonts or use certain characters for security reasons, but most CSS code should be fine. We can't possibly list the full list of CSS options here; you can check the w3 CSS page to learn CSS.

In order to style the box and headers that we added in the last section, we can use the following CSS:

 h2 { 
 background: black; 
 color: white; 
 font-size: 25px; 
 padding: 5px; 
}
 .fate-box { 
 border: 2px solid black; 
 padding: 3px; 
 margin-bottom: 5px; 
}
 .fate-box .fate-box-title { 
 color: #A6A8AB; 
 font-size: 11px; 
}
 .fate-box .fate-box-content { 
 color: black; 
 font-size: 15px; 
}

3. Badge version

The badge is a shortened version of a block that contains only the essential information to understand it. It's completely optional, but if you have managed to create the basic sheet, the badge shouldn't be too difficult, as it uses the same kind of code as the basic one (HTML and TWIG).
Keep in mind that the badge should be designed to appear in the sidebar of articles (in fact, it will automatically appear in character journals), so try to avoid using too many columns. For FATE Accelerated, I decided to include only the most static information that summarizes their personality (i.e. the six approaches and the five aspects). However, unlike in the basic sheet, I put the six approaches side by side, in six different columns.
In order to embed the badge to any article, add "|badge" after the block id. For example: [block:45519|badge] will generate the block you can see at the right.

Jon Snow Smith

Careful

1

Clever

0

Flashy

3

Forceful

2

Quick

2

Sneaky

1

Aspects

High Concept

Lord Commander of the Night's Watch.

Trouble

I know nothing, or that's what my wildling girlfriend kept saying.

It's best to keep your enemies close.

Sometimes there is no happy choice, only one less grievous than the others

Don’t call me Lord Snow.

4. Trackable form (advanced!)

The trackable form lets you change the value of the fields of your sheet, so it is recommended to use for blocks like NPCs or character sheets. In order to build a trackable form, you can use HTML and TWIG (and style it with CSS), as in the previous section. This section, however, introduces a new HTML tag: <input>. This tag is the one you use in order to actually create the text boxes. You can use the following code as a guide for each field:

<input
 placeholder="PLACEHOLDER"
 class="form-control" 
 type="string/number"
 value="CURRENT VALUE"
 name="FIELD NAME"
/>

Refresh

Fate Points

Consequences

Mild Consequence

Moderate Consequence

Severe Consequence

Stress

Stress score

If the above is confusing, here you have a quick explanation of each field:

• placeholder: if you want the field to display a text that will disappear when you start typing in it, specify the text here. This is very useful for examples.
• class: you can specify CSS classes here for more customization. If you want to keep thing simple, just leave it with the default "form-control" class, which will make the field have the default World Anvil CSS.
• type: there are many types of inputs you can specify here. However, if you are just starting out, you just really need to know about "string" and "number". "string" will allow you to enter any kind of characters in the field, while "number" will limit it to numeric characters.
• value: if you want the field to be already filled in when you load the page (for example, to display the current value of the field if it has already been filled in), use this field. You will need to use TWIG here. See below for an example and the sidebar for an explanation.
• name: this field has no visible external effect, so just use the field name, replacing spaces with underscores and removing any special characters.

The following examples show an input form for text and numbers respectively, taken from the FATE Accelerated character sheet:

You can embed the form if you add "|trackable" at the end of the block tag. For example: [block:45519|trackable]. Keep in mind that anyone with access to the article the form is embedded in will be able to use it and change your character sheet's data! If you want to have the form in a public article but avoid problems like that, you can put it in a secret and then embed the secret in the article.

5. Edit form (advanced!)

For maximum customization, you can change the structure and style of the edit form for the character sheet (i.e. the page you or your players will use to create the character sheet from scratch). Keep in mind that if you decide to design it, you will need to design the full form, so you should use all fields here (and keep it updated if you add more in the future). This page uses HTML and TWIG (you can style it with CSS too). In order to create the text fields, you can use the same <input> tags we learned in the previous step.


As a tip, you can use the same structure of the basic sheet, so that users will be able to see the result of the sheet before saving. You can see the edit form for the FATE Accelerated character sheet if you add this RPG system to your World Configuration and create a new character sheet for this system.

Navigation

FAQ

Do I need to know programming?

Not really, but a basic level of HTML and CSS will be very useful. If you want to build a complex sheet, you will need to understand the scripting language TWIG.

I need more help!

This guide only covers the basics. Research the linked resources for more information. If you are stuckk with something come to the Discord and ask in the #twig-help channel.

See also

Tillerz' Corner

TWIG reference

You can use TWIG to have more flexible customization. This quick reference contains the most basic usage of this language; if you want to learn more, you can use the official TWIG Documentation.
Have questions? Join our Discord server, sync your World Anvil and Discord accounts (you can do so from your World Anvil account settings), and use the #twig-help channel under the Help category.

Variables

A variable is a word that has (or can have) a value assigned to it. In our case, variables are used to reference the different fields of the character sheet. When editing a sheet, there is a reference sidebar with the list of variables, but their name is basically the name of the field with underscores instead of spaces. For example, if you have a field called High Concept, the variable will be high_concept. You can use the following code to insert the value of a variable in your sheet:

See example

(Tip: click on the images to see them full-size.)

Conditionals

More information...
Maybe you want to avoid displaying certain content if one of the fields is empty. To do so, you will have to check if the variable is defined. You can use a conditional, like that:

You can also have something else display if the field is empty:

See examples

These examples are taken from the FATE Accelerated character sheet.

The above will display the "Additional aspect 1" field (with HTML elements for structure and styling) if the user has filled it in. Otherwise, it won't display anything.

The above will display the "Current Fate Points" field (also with HTML for structure and styling) if the user has defined it. However, if the field is empty, it will display a 0 instead of the variable.

Operators

More information...
Operators are words or symbols that can be used to create more complex expressions. TWIG has many different operators, and if you want to learn all of them, click the "More information" link above. In this section we will only explain the operator used in the FATE Accelerated character sheet: ?:.
The operator is used in this way:

As you can see, it's kind of a shorthand for a conditional. In the FATE character sheet is used in input fields for the trackable and edit forms, in order to display the current value of the field:

In this example, when you load the page with the trackable form, the "Current Fate Points" field will already display the number of fate points that the character has. If the field is empty, it means that it has no points, so it will display a 0. Note that the 0 is inside simple quotation marks. If you want to make it display something that is not another variable, it should always be inside quotation marks, to tell the system that it's a string (i.e. "normal text").

The magic of duplication

This guide has been using the character sheet for FATE Accelerated as an example. If you want to see how the full code for this sheet looks, you can duplicate its code by accessing the character sheet here: Jon Snow Smith. A duplicate of the template will automatically be added to your Studio and you will be able to edit it as you wish.
If you want to know how a more complex block is made (such as the DnD 5e character sheet), you can do the same to learn how complex TWIG is used