In an ideal world, e mail purchasers can render HTML pretty much as good as main browsers. Sadly, this isn’t the case. E mail purchasers do not help fashionable HTML and CSS niceties and have loads of quirks to be aware of. Ensuring an HTML e mail seems to be good in probably the most used e mail purchasers takes loads of work.
To make crafting HTML emails much more satisfying, the parents at Mailjet created an answer known as MJML, which stands for “Mailjet Markup Language.” It is an easy-to-use abstraction layer over HTML.
We now have created a brand new package deal known as spatie/mjml-php to simply convert MJML to HTML utilizing PHP. In the event you’re utilizing Sidecar, you may be joyful to know that we have additionally created a package deal known as spatie/mjml-sidecar, to transform MJML to HTML utilizing Sidecar.
On this weblog put up, I would wish to introduce the package deal to you.
Having a look at MJML
MJML seems to be very very similar to HTML however with mj tags. Let’s check out some legitimate MJML.
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text invalid-attribute>Good day World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Within the code above, you’ll be able to see that there are a lot of mj elements you can make use of. I will not clarify all of them as they’re described within the in depth documentation. In these docs, you may additionally discover an entire instance of a whole mail.
When changing the MJML to HTML, that is the end result:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:workplace:workplace">
<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Appropriate" content material="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content material-Kind" content material="textual content/html; charset=UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1">
<model kind="textual content/css">
#outlook a {
padding: 0;
}
physique {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
desk,
td {
border-collapse: collapse;
mso-table-space: 0pt;
mso-table-space: 0pt;
}
img {
border: 0;
top: auto;
line-height: 100%;
define: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
show: block;
margin: 13px 0;
}
</model>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<model kind="textual content/css">
.mj-outlook-group-fix { width:100% !essential; }
</model>
<![endif]-->
<!--[if !mso]><!-->
<hyperlink href="https://fonts.googleapis.com/css?household=Ubuntu:300,400,500,700" rel="stylesheet" kind="textual content/css">
<model kind="textual content/css">
@import url(https://fonts.googleapis.com/css?household=Ubuntu:300,400,500,700);
</model>
<!--<![endif]-->
<model kind="textual content/css">
@media solely display screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !essential;
max-width: 100%;
}
}
</model>
<model media="display screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !essential;
max-width: 100%;
}
</model>
<model kind="textual content/css">
</model>
<model kind="textual content/css">
</model>
</head>
<physique model="word-spacing:regular;">
<div model="">
<!--[if mso | IE]><desk align="heart" border="0" cellpadding="0" cellspacing="0" class="" position="presentation" model="width:600px;" width="600" ><tr><td model="line-height:0px;font-size:0px;mso-line-height-rule:precisely;"><![endif]-->
<div model="margin:0px auto;max-width:600px;">
<desk align="heart" border="0" cellpadding="0" cellspacing="0" position="presentation" model="width:100%;">
<tbody>
<tr>
<td model="course:ltr;font-size:0px;padding:20px 0;text-align:heart;">
<!--[if mso | IE]><desk position="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" model="vertical-align:prime;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" model="font-size:0px;text-align:left;course:ltr;show:inline-block;vertical-align:prime;width:100%;">
<desk border="0" cellpadding="0" cellspacing="0" position="presentation" model="vertical-align:prime;" width="100%">
<tbody>
<tr>
<td align="left" model="font-size:0px;padding:10px 25px;word-break:break-word;">
<div model="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;shade:#000000;">Good day World</div>
</td>
</tr>
</tbody>
</desk>
</div>
<!--[if mso | IE]></td></tr></desk><![endif]-->
</td>
</tr>
</tbody>
</desk>
</div>
<!--[if mso | IE]></td></tr></desk><![endif]-->
</div>
</physique>
</html>
Wow, that is loads of HTML you did not have to provide you with your self. Neat! As you’ll be able to see above, some code is being added to make sure it renders nicely in older e mail purchasers.
Changing MJML to HTML
The MJML gives many alternative choices to transform MJML to HTML: there’s a Node instrument, a CLI instrument, and likewise a web site the place you’ll be able to convert MJML manually. Utilizing one of many many plugins, you can too have auto-completion for MJML in your favourite editor.
Our latest package deal, spatie/mjml-php, can convert MJML to HTML utilizing PHP. It is a handcrafted, easy-to-use wrapper across the Node instrument. By utilizing the Node instrument below the hood, we are able to simply make use of all performance there with out having to implement all of it in PHP. However as a consumer of the PHP package deal, you need not thoughts all this.
The package deal will be put in utilizing composer:
composer require spatie/mjml-php
Additionally, you need to be certain that the Node MJML package deal is on the market in your challenge.
npm set up mjml
With this out of the way in which, you can begin changing MJML.
use SpatieMjmlMjml;
// let's assume $mjml comprises the MJML you need to convert
$html = Mjml::new()->toHtml($mjml);
There are a few strategies, similar to beautify, hideComments(), minify() to customise the conversion course of.
use SpatieMjmlMjml;
// let's assume $mjml comprises the MJML you need to convert
$minifiedHtml = Mjml::new()->minify()->toHtml($mjml);
We additionally added a way that you should use to make sure the given MJML is legitimate.
use SpatieMjmlMjml;
Mjml::new()->canConvert($mjml); // returns a boolean
Integration with Sidecar
Sidecar is a incredible package deal that simply allows you to use different programming languages in addition to PHP in your Laravel codebase. Beneath the hood, this work by executing code in one other language on AWS Lambda.
We have created a package deal spatie/mjml-sidecar to transform MJML to HTML utilizing Sidecar. This manner, the conversion course of will likely be accomplished on AWS, and you do not have to have Node obtainable in your server.
With the sidecar package deal put in, you need to should tack on the sidecar() methodology to execute the conversion on AWS.
use SpatieMjmlMjml;
// let's assume $mjml comprises the MJML you need to convert
$html = Mjml::new()->sidecar()->toHtml($mjml);
Why we constructed this
At Spatie, we’re at all times constructing packages not solely as a result of we like doing it however as a result of we want them ourselves. The MJML package deal will likely be utilized in our paid product Mailcoach. Mailcoach is an reasonably priced, developer- and privacy-friendly answer to ship newsletters, arrange e mail automation, and ship transactional emails.
Utilizing Mailcoach, you could possibly already create your templates and emails utilizing Markdown. The spatie/mjml-php package deal will likely be used so as to add MJML help to Mailcoach. We guess that a lot of our customers will likely be joyful that utilizing MJML will make it simpler to create emails that can look good to every e mail shopper.
MJML help will likely be added within the upcoming v7 of Mailcoach in each the hosted and self-hosted variations. We count on to ship this launch within the subsequent couple of weeks.
In closing
There are a few choices obtainable on our MJML package deal that we did not cowl in our weblog put up. To be taught extra, head over to the readme of spatie/mjml-php on GitHub.
That is considered one of many packages that we have made. You will discover an in depth listing of Laravel and PHP packages we launched beforehand on our firm web site. There’s in all probability one thing there on your subsequent challenge. In the event you like our open-source stuff, you’ll want to additionally take a look at our paid merchandise that make engaged on open-source sustainable for our firm.
