# 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>


<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 }}}


<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>


<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>
<div>No dice</div>

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)
Last Updated: 6/10/2019, 1:29:11 AM