Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Greenkeeper badge Gulp pipeline example dedicated to build HTML emails.


This is a mere prototype. Use it at your own risks. This was intended to provide a faster to build a complete set of emails with custom parts and styling.


$ git clone
$ cd hbs-mjml-seed
$ gulp

This pipeline use MJML for custom email markup, Handlebars for templating and SASS for styling. Please refer to their own documentation and/or repo for help:

Let's keep MJML and CSS separated, shall we?


The same way that making HTML for email can be tedious, having to tweak CSS rules attributes by hand can be cumbersome as well. For these reasons, I didn't want to regress from my previous setup but MJML is pretty much the only solution (at the time of this writing) to provide a markup capable of removing noise from your HMTL templates.

To achieve this, this pipeline leverages a fork from the fantastic lib inline-css by (and, in the process, gulp-inline-css; same author). Here's the pull request, if you wish to weigh in. While this lib neatly converts class related css rules into style attributes, I tweak it up to support any custom rule, including exotic ones (e.g. full-width).

Interesting side-effect: VML style attributes (for, say, call-to-actions) can now be set, so you won't have to worry about having discrepancies between templates and style rules when modifying your call-to-actions.

Can I change these definitions?

Yes, you can. Open up /gulptasks/core/core-mjml.js and start adding properties. By default, any added rule will become an attribute.


Why using Handlebars

Handlebars allows us to use a neat built-in feature that make it skip partials declaration on first pass.

\{{>partialName}} (Source)

This way, a single handlebars template can produce multiple files, based on the first layer of variables, ready to be fed with real production data.

Use case: theming

First round —Gulp task

Given a single index.tpl, we loop through an array of JSON data defined in /gulptasks/core/core-templates.js. Each index sets up what is static: pre-header, default unsuscribe link, invoke the correct partial, etc.

Second pass —on server

The produced new templates (one per theme) can now be used for a specific scenario or userbase sampling.


MJML being a young project, some elements can still be buggy or lack optimizations; you may have to mix up both MJML and raw html.


An efficient pipeline to build MJML-based HTML for emails.







No releases published


No packages published