MJML EMAIL TEMPLATES CODE

Step 3: Confirm and customize your brand elements We are going to use Mailjet's domain name as an example. Step 2: Enter your domain nameĮnter your web domain in the second step and then click on 'Generate Emails'.

MJML EMAIL TEMPLATES CODE

All example code is available on GitHub.You can also access it by clicking on this link: Mailjet Email Template Generator. Some problems with Outlook: hero images don't work and a white line appearsĭon't forget to check MJML's website: mjml.io.Testing emails is very easy with mjml utils.Very handy for maintaining multiple emails with different layout.I plan to do a Litmus test to see if this assumption is correct. I've experienced some render issues with the Outlook client, but was genuinely surprised by how consistent it worked across different devices and clients. There are a lot of constraints, but since email has a lot of constraints, maybe it's for the better. MJML seems to be a suitable tool for system emails. Combined with a Litmus account, this makes for a very swift workflow. For sending test emails you need a Gmail account. This enables building and watching an entire folder and send out test emails. And a for-loop would be very useful for newsletters.įor testing and building another npm-package comes in handy: MJML-utils. The header, for example, is always the same except for the content. Although this is a deliberate choice from the makers, it would be handy to pass some content into partials.

Unfortunately, MJML is no real template engine, and variables and loops are therefore not available. This also makes for much better maintenance because there is no duplicate code. Appearance can now be managed from a central point and is applied to all templates at once.

In classes.mjml all custom classes are defined and, when included, available within the template. In elements.mjml all the default elements are defined. In the example, all the different templates include both elements.mjml and classes.mjml. Setting up shared components and classes is therefore really easy. One of MJML most time-saving features is that you have classes at your disposal AND you can make use of partials/includes. Building and testing an email library with MJML and MJML-utils Most times email is read on a mobile device, so this could actually prove to be quite valuable. By nesting columns, you can create a template that has a single column on (most) small screens and more columns on larger screens. MJML has another advantage: it's (kinda) responsive. If you want something really exotic and reusable, you can build your own component. MJML offers default elements for common building blocks like buttons, tables, images and so on these default elements are called components. MJML is structured as an XML document and looks a lot like HTML. It's important to know that both the framework and the utilities are npm-packages.Īlthough MJML has its own syntax, it does not take a lot of time to learn. The library consists of:īecause there are already a dozen articles about installing the MJML framework, this article won't cover the installation process. To test whether or not this solution is feasible, I've built an email library as proof of concept. This makes building an email template a lot easier and less time-consuming. You can build your templates within the clean MJML markup language and after it's processed you have an HTML template with all the clients' exceptions and specifics, much like Sass processes to CSS. A shame, because receiving feedback from an application by mail is often an integral part of the user experience. This makes creating nice looking system emails a time-consuming effort and a real pain in the back. It's a jungle of devices and clients, all with their own rules and constraints. There are a ton of ways to receive your email: in Outlook '13 on your PC, in Mail on your iPhone, in Gmail's webmail client on your Galaxy Tablet or any other possible combination.

Mjml email templates