HTML editor

When the AnyMod script runs, it first replaces a mod's tag (<div id="anymod-abcde"></div>) with the mod's HTML. This means anything in a mod's HTML will be placed directly onto the page.

In addition to plain HTML, you can insert fields/variables directly into a mod's HTML with Handlebars.

Fields

Fields let you insert editable information into your mod. For example, you can add a title field, and it will be available in your mod in 3 different ways:

1. In the HTML via Handlebars, by using {{ title }}
2. In the CSS via SCSS, by using $title
3. In the JS, by using mod.data.title

Using Handlebars

Handlebars lets you insert fields into your HTML without needing to write JavaScript. Full documentation on Handlebars can be found here (opens new window).

Text field

For a regular field like title set to 'Hello, Mod!', insert with 2 curly braces:

<h1>{{ title }}</h1>

Result:

<h1>Hello, Mod!</h1>

Rich text (HTML) field

To insert a Rich text (HTML) field like body, use 3 curly braces instead of 2:

{{{ body }}}

Result:

<h3>This is the body</h3>
<p>which is HTML</p>

Repeat fields

For a repeat field, you can loop over the mod's items using Handlebars. For example, with a repeat color and text fields called textColor and text, we might have 3 items defined:

Item	textColor	text
0	#409cdc	This is blue
1	#2aa198	I'm green
2	#7358d6	Lastly, purple

To insert these:

{{#each items}}
<p style="color:{{ textColor }}">{{ text }}</p>
{{/each}}

Result:

<p style="color:#409cdc">This is blue</p>
<p style="color:#2aa198">I'm green</p>
<p style="color:#7358d6">Lastly, purple</p>

Boolean field

You can conditionally add things to your mod with fields and Handlebars. For example, with a boolean field called showSection, you could show or hide something:

{{#if showSection}}
<div>The section is visible</div>
{{else}}
<div>No dice</div>
{{/if}}

With showSection set to true

<div>The section is visible</div>

With showSection set to false

<div>No dice</div>

Example mod (opens new window)

Handlebars helpers

In addition to the core Handlebars functionality, mods also include the following helpers from the handlebars-helpers (opens new window) library:

Category	Description	Docs
comparison	Compare values	link (opens new window)
inflection	Plurals and number suffixes (ordinals)	link (opens new window)
markdown	Compile markdown to HTML	link (opens new window)
math	Add, divide, floor, ceiling, rounding, etc	link (opens new window)
number	Commas, decimals, scientific notation, etc	link (opens new window)
string	Capitalize, format, count, truncate, etc	link (opens new window)

Manipulating images

You can use buildImage to manipulate images. For example, with an image field called image, you can use Handlebars to crop and center on a face:

<img src="{{ buildImage image w=300 h=200 c='fill' g='face' }}" />

Vue syntax

You may encounter mods that use Vue.js, in which case you will notice HTML syntax like the following:

Syntax	Purpose	Docs
v-text	Insert text	link (opens new window)
v-html	Insert HTML	link (opens new window)
v-bind	Bind to an attribute, e.g. v-bind:class, v-bind:style, :class, :style	link (opens new window)
v-if	Conditionally include an element	link (opens new window)
v-show	Conditionally show an element	link (opens new window)
v-for	Loop over an array	link (opens new window)
v-on, @	Respond to events (v-on:click, @click, @submit, etc)	link (opens new window)
v-model	Bind to an input	link (opens new window)