In this example, we'll use Handlebars to pre-compile a mod's HTML.

# 1. Set your mod to Handlebars mode

Select Handlebars from the HTML compile method dropdown:

# 2. Add some custom fields

Click the code icon (< >) to edit the mod's code, then visit the Fields tab.

Add 2 fields to your mod:

1. message: Simple text
2. content: Rich text (HTML) with Repeat

Your mod fields should look like this:

Your mod's HTML panel should now read

{{ message }}

{{#each items}}
  {{{ content }}}
{{/each}}

# 3. Add content to your fields

Click the pencil icon and go to the Content tab, then add some content for your message field. Also add some repeat items with the content field set:

Click Save & Publish to save your content, then view your mod:

The mod's fields are being filled in with Handlebars.

# 4. Customize your HTML

You can insert text anywhere in your HTML using Handlebars. Try updating your HTML to the following:

<div style="background: {{ message }}">
  {{ message }}
</div>

{{#each items}}
  <div style="border: 1px solid blue;">
    {{{ content }}}
  </div>
{{/each}}

Now change the value of message from "Hello, World!" to "green". As written, this will be inserted into the style attribute of the div on line 1 as well as inside the div itself (line 2). The result will be:

Using this approach, you can add content, styles, and more to your mod's HTML using Handlebars.