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.

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

Handlebars helpers

In addition to the core Handlebars functionality, mods also include the following helpers from the handlebars-helpers library:

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

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
v-html Insert HTML link
v-bind Bind to an attribute, e.g. v-bind:class, v-bind:style, :class, :style link
v-if Conditionally include an element link
v-show Conditionally show an element link
v-for Loop over an array link
v-on, @ Respond to events (v-on:click, @click, @submit, etc) link
v-model Bind to an input link
Last Updated: 6/10/2019, 1:29:11 AM