Confused about variables

[SachaG]

I'm sure this is a question that gets asked all the time, but I wanted to report my confusion about how MJML handles variables, if at all.

Looking at https://mjml.io/documentation/ I can't see any technique to interpolate variables similar to Handlebars' {{ foo }} or JSX' { bar }.

On the other hand this post from just a few months ago mentions a {% set gender = var:user.gender %} syntax

Is that deprecated? If so how do you do something a simple as showing a user's name? (such as the "Hello, Helen" heading from the tutorial).

I feel like even if MJML doesn't support variables anymore, the documentation should include a section about workarounds, because this is going to be one of the first questions anybody new to the library has.

[SachaG]

Oh and I'm also confused by https://dev.mailjet.com/template-language/ vs https://mjml.io/documentation/

[ngarnier]

There is no mention of any templating language in the documentation simply because there isn't any built-in templating language in MJML (and never has been). You're indeed confusing MJML with Mailjet's template language.

MJML is a markup language aimed at making it easy to create responsive emails.

For templating, you're free to use any template language of your choice, such as Mailjet's template language (which you linked) or https://github.com/pugjs/pug or any other.

[SachaG]

I get it now, but I think that explanation should be in the docs somewhere. I had assumed MJML was a replacement for Handlebars, where it's actually more of a replacement for HTML; meaning you still need Handlebars or an equivalent to generate it.

Maybe it's just me but that wasn't obvious at all at first.

[piavgh]

@SachaG : Thanks for your question. I'm confused as well

[softmarshmallow]

But it just makes a lot of sense to provide templating feature in-the-box.
The whole project is designed for developer usage, so i think this is essential to have.

Not having template support just makes the whole process redundantly complicated.

1. create mjml file
2. create template definitions
3. custom scripts for replacing or using handlebar for static mjml file
4. convert mjml file to html
5. and on

Thoughts? :)

[iRyusa]

Everything could be automated or integrated in any nodeJS project. We even have browser build now so any templating lang should be easy to plug. There's a detailed issue where we explain why we won't do this here : #1630

[charlie-s]

If you're just looking to interpolate variables, it's pretty simple without any additional libraries. Consider this template:

<mjml>
  <mj-body>
    <mj-section background-color="#fbbf24">
      <mj-column>
        <mj-text font-size="40px" color="#282524">
          Welcome {{ name }}.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

A function to load the requested template and interpolate:

import { readFileSync } from 'fs'
import mjml2html from 'mjml'

export function interpolateTemplate (tplName, vars) {
  // Load template.
  const tpl = readFileSync(`path/to/templates/${tplName}.mjml`)

  // Render.
  let html = mjml2html(tpl)

  // Interpolate variables.
  for (const prop in vars) {
    html = html.replaceAll(`{{ ${prop} }}`, vars[prop])
  }

  return html
}

Usage:

interpolateTemplate('my-cool-template', {
  name: "Bugs Bunny"
})

[yf-hk]

If you're just looking to interpolate variables, it's pretty simple without any additional libraries. Consider this template:

<mjml>
  <mj-body>
    <mj-section background-color="#fbbf24">
      <mj-column>
        <mj-text font-size="40px" color="#282524">
          Welcome {{ name }}.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

A function to load the requested template and interpolate:

import { readFileSync } from 'fs'
import mjml2html from 'mjml'

export function interpolateTemplate (tplName, vars) {
  // Load template.
  const tpl = readFileSync(`path/to/templates/${tplName}.mjml`)

  // Render.
  let html = mjml2html(tpl)

  // Interpolate variables.
  for (const prop in vars) {
    html = html.replaceAll(`{{ ${prop} }}`, vars[prop])
  }

  return html
}

Usage:

interpolateTemplate('my-cool-template', {
  name: "Bugs Bunny"
})

Isn't it easier to use something like lodash's _.template or ejs?

How about for loops and if else?

[AnthonyDugarte]

If you're just looking to interpolate variables, it's pretty simple without any additional libraries. Consider this template:

<mjml>
  <mj-body>
    <mj-section background-color="#fbbf24">
      <mj-column>
        <mj-text font-size="40px" color="#282524">
          Welcome {{ name }}.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

A function to load the requested template and interpolate:

import { readFileSync } from 'fs'
import mjml2html from 'mjml'

export function interpolateTemplate (tplName, vars) {
  // Load template.
  const tpl = readFileSync(`path/to/templates/${tplName}.mjml`)

  // Render.
  let html = mjml2html(tpl)

  // Interpolate variables.
  for (const prop in vars) {
    html = html.replaceAll(`{{ ${prop} }}`, vars[prop])
  }

  return html
}

Usage:

interpolateTemplate('my-cool-template', {
  name: "Bugs Bunny"
})

Isn't it easier to use something like lodash's _.template or ejs?

How about for loops and if else?

Indeed, it's easier to use _.template, and it also supports for loops, and if else.