MJML TEMPLATE HOW TO
MJML TEMPLATE CODE

These just exist so you don't have to repeat yourself over and over again.Įach child of the mj-attributes tag is another MJML tag such as mjml-text or mjml-button. You can of course override these at any time.

mj-attributes allows you to set default styling for all MJML tags that you're using. Click the button inside to log into your account It's a bit of an art to find text that is just long enough to fill out the entire area, but not too long to be cut off by the email client.

You can use this to tease your subscribers about the content of your newsletter or give a summary of the contents. To give you some context, I'm talking about the light-gray text depicted here (in Apple Mail) This is an invisible preview text that gets displayed in the inbox of some email clients right below the subject of the email. Īfter this we find an mj-preview tag that contains some text. But some do and they get rewarded with prettier typography. Of course, given the state of affairs, not all email clients support this. If you look at where the href links to, you'll quickly figure out that all this does is load in a font hosted on Google Fonts. Īs the very first child of our document head we have a mj-font tag. Now let's look at all the weird stuff in the mj-head and demystify it a bit. The mj-head is a pretty exciting place where you define all of your styling and meta data! It's probably the most fun part of writing an MJML-based email. So the standard structure looks like so: Inside this root element you have the same sections you're used to from a regular HTML document. As such, each MJML document begins with a simple root tag: It is after all a markup language that tries to spit out HTML. The most complex part is probably right at the beginning in mj-head, but let's start from the very beginning: the root element.

MJML TEMPLATE CODE

Okay, that was a lot of code and if you're not running yet, I'm proud of you. If the button up doesn't work, you can use this link: Somebody requested a log in from your account. Ĭlick the button inside to log into your account First, let's take a look at the entire template as it stands and then let's take it apart bit by bit.

It's not particularly complex, so I think it's a perfect fit for a first go at MJML. It's a magic link email I'm using for a meeting tracker app I'm currently building. Mjml -config.minify email.mjml -o email.htmlĪs an example email to build I will pick one made by yours truly. # Watch an MJML file for changes and recompile automatically

MJML TEMPLATE HOW TO

To learn how to use the command-line tool in detail, be sure to check out the excellent documentation.īut as quick summary here are the commands you will most likely want to use # Compile the MJML file and save it to an HTML file I admit that I mostly use that one, simply because it's super convenient to see your email right next to your code. If you're not part of the web crowd and don't have MJML or if you just want to try it out and save some time, you can also use their online playground. You need only run the following command and you're good to go. Installing MJML is quite simple if you have npm or yarn installed. And this is your whirlwind guide to building HTML with it! So let's get started. It came a bit too late for my mainstay in email marketing, but I still use it for transactional emails. But a while ago, thanks to I learned about one framework that stood above all others. But they're either terrible to set up or still require you to remember a good few pitfalls in HTML email. Of course for a while now there's been solutions like Foundation for Emails, emailframe.work and many others. No really, here's a list of CSS support in email. And funnily enough Google, the company responsible for one of the most advanced browers, is one of the worst offenders. We're talking inline styles, table layouts, transparency hacks, and so and so forth. The amount of tiny, obscure things you have to remember is incredible. Building HTML email was one of my responsibilities at my first job before I got into freelancing and I feel like in those three years I aged by at least a decade. I wish I was kidding about this, I really do. HTML email is like the Wild West of web technologies. The amount of work that has to go into these magical creations can be absolutely mind-numbing. If you count yourself among those that have never built an HTML email before, count your blessings. So I assume that if you're reading this article, you belong to one of three categories of people: The type which has never built HTML email but wants to get into it, the type which has built HTML email before and wants to find a better way to do it and then the type who just reads everything I write for some reason.

Mjml template