Recently I was working on a project which used MJML for building responsive HTML emails and FreeMarker as a template engine. I have faced some hurdles while integrating MJML with FreeMarker tags.

Problem with default config

I have started experiencing issues after enabling CSS inlining. MJML for CSS inlining uses Juice library. Turns out that Juice by default doesn’t play nicely with FreeMarker tags.

Juice by default lower cases all HTML tag attributes, so <#if task.dateCreated?has_content> is turned into <#if task.datecreated?has_content>

Solution

To make MJML play nicely with FreeMarker you must configure Juice to skip processing FreeMarker tags.

You can follow steps below or take a look into sample project on GitHub.

Create .mjmlconfig config file

{
  "packages": [],
  "options": {
    "juicePreserveTags": {
      "freeMarkerStartTag": {
        "start": "<#",
        "end": ">"
      },
      "freeMarkerEndTag": {
        "start": "</#",
        "end": ">"
      }
    }
  }
}

Enable config file

While running mjml command add –config.useMjmlConfigOptions=true flag, to pull config from .mjmlconfig file.

E.g:

mjml --config.useMjmlConfigOptions=true -r src/templates/*.mjml -o build/templates/

Conclusion

The solution is pretty simple and straight forward, but it is not well documented.

I hope this article was useful. If you have any questions or suggestions feel free to leave a comment.