In this example, we'll use ES6 / ES2015 JavaScript in a mod.

# 1. Set your mod to Babel mode

Select Babel from the JS panel dropdown:


Babel (opens new window) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript.

# 2. Add some HTML

Add some HTML to the mod. For this example, add some basic text with an id of message:

<div id="message">
  Hello, World!

# 3. Add some ES6 JavaScript

Add the JS below to your mod. A few features of ES6 / ES2015 highlighted here are:

  • Line 1: let assignment, similar to var in earlier JS versions
  • Line 3: const assignment, used for one-time assignment when a variable's value will not change
  • Line 6: String literal syntax (using ` instead of " or ') with a variable inserted using ${}
  • Line 12: Arrow operator => used in place of function syntax
let messageEl = document.getElementById('message')

const itemsToAdd = [
  `This mod is ${mod.key}`

 * Loop over itemsToAdd and add a div for each item 
 */ => {
  let newDiv = document.createElement('div')
  newDiv.innerHTML = item


This is only a subset of ES6 / ES2015 features. You can learn more here (opens new window)

# 4. Result

Saving the mod will reload its preview, which should look like:

Hello, World!
This mod is bkkan

Babel has pre-compiled the above ES6 / ES2015 JavaScript into "regular" ES5 JavaScript as shown below, and this JavaScript is what ultimately runs in the browser when the mod is loaded:

"use strict";
var messageEl = document.getElementById("message");
var itemsToAdd = [
  "This mod is ".concat(mod.key)

 * Loop over itemsToAdd and add a div for each item
  var newDiv = document.createElement("div");
  newDiv.innerHTML = item;

In this way, you can use new features of ES6 / ES2015 JavaScript while still maintaining backwards compatibility for mods viewed in older browsers.

Last Updated: 7/9/2019, 9:46:07 PM