Adding offset to {{@index}} when looping through items in Handlebars


Handlebars gives you the possibility to write a custom helper that handles this situation, e.g. a helper function that lets you perform calculations on expressions like addition and subtraction etc.

Below function registers a new helper, which simply increments a value by 1:

var Handlebars = require('handlebars');

Handlebars.registerHelper("inc", function(value, options)
    return parseInt(value) + 1;

You can then use it within the handlebar expression using the inc keyword, like:

{{inc @index}}

Actual answer:

Register a math handlebar and perform all mathematical operations.

app.engine('handlebars', exphbs({
    // Function to do basic mathematical operation in handlebar
    math: function(lvalue, operator, rvalue) {lvalue = parseFloat(lvalue);
        rvalue = parseFloat(rvalue);
        return {
            "+": lvalue + rvalue,
            "-": lvalue - rvalue,
            "*": lvalue * rvalue,
            "/": lvalue / rvalue,
            "%": lvalue % rvalue
app.set('view engine', 'handlebars');

Then you can directly perform operation in your view.

    {{#each myArray}}
        <span>{{math @index "+" 1}}</span>

I believe you can use...

{{math @index "+" 1}}

To expand on Mobiletainment's answer, this solution allows for the value to be incremented by to be passed in as an argument. If no value is passed, then a default value of 1 is used.

Handlebars.registerHelper('inc', function(number, options) {
    if(typeof(number) === 'undefined' || number === null)
        return null;

    // Increment by inc parameter if it exists or just by one
    return number + ( || 1);

Within your template you can then write:

{{inc @index inc=2}}

I solved this issue for myself by adding a short script tag to the bottom of my handlebars code!

Add a class to wherever you are calling @index and then the below jQuery code works (can also be done using vanilla JS).

<p class="create_index">

edit 4/28- This has changed to use vanilla JS for better backwards compatibility (i.e. IE7, 8):

<span class="create_index"></span>
    var divs = document.querySelectorAll('.create_index');
    for (var i = 0; i < divs.length; ++i) {
        divs[i].innerHTML = i + 1;

document.querySelectorAll has great compatibility but could also be document.getElementsByClassName("create_index")

The handlebars-helpers library has a fairly thorough mathematics library in lib/math.js, including a general purpose {{add a b}} helper defined as follows:

 * Return the product of a plus b.
 * @param {Number} a
 * @param {Number} b
 * @api public
helpers.add = function(a, b) {
  return a + b;

If you don't want to copy and paste this into your project and you have the possibility to use npm, you can get this dependency as follows:

npm install handlebars-helpers --save

Then, you can register the math helpers as follows:

const handlebars = require('handlebars'),
  handlebarsHelpers = require('handlebars-helpers');

  handlebars: handlebars

Throwing my solution in here. CSS counters.

body {
  counter-reset: section;                     /* Set a counter named 'section', and its initial value is 0. */

h3::before {
  counter-increment: section;                 /* Increment the value of section counter by 1 */
  content: counter(section);                  /* Display the value of section counter */

I was stuck on this and it was a nicer solution compared to adding a new helper.

I was using nodejs and express-handlebars as template engine and facing same problem. And this is how I managed to solve.

You can create a folder and a js file inside it where you can create your own custom helpers that takes index and returns incrementing it by 1.

module.exports = {
    formatIndex: function(index)  {
        return index+1;

Remember to register helper in your application(in my case app.js). I have used express-handlebars so I have reistered helper in this way:

app.engine('handlebars', exphbs({defaultLayout: 'home', helpers: { formatIndex }}));

Note: You have to import formatIndex before registering.

Then you can use it in your view as:

{{#each assignments}}
     <div>{{formatIndex @index }}</div>