MJML + Parcel = ❤️
Today we are officially launching Parcel's support of MJML! We've combined all the goodness you know and love in Parcel with the power of MJML.
SO impressive 😍 Node hovering, simple custom component syntax with attributes. This is the endgame editor for MJML users
– Maxime Brazeilles, Core Developer of MJML
If you aren't familiar with MJML it is an absolutely brilliant markup language for email made by our friends at Mailjet.
You can write something straightforward like this:
<mjml>
<mj-head></mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text> hello world </mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>And end up with 106 lines of HTML ready to send to all major email clients.
Let's dive into how Parcel and MJML work together!
Parcel includes full Emmet support for MJML as well as hover information and autocomplete of the MJML components and attributes.
Every time you make a change Parcel validates the MJML, CSS, and HTML in the email right inline in your code!
Even MJML emails can get long and hard to navigate. Inspect element allows you to click anywhere on the preview and jump right to that spot in the code. Focus mode keeps the preview scrolled right to where you are editing and outlines the related MJML component.
We are big fans of avoiding copy and paste. Parcel components make that super doable! You can create components with just a few lines of code and absolutely no JavaScript required.
At the end of the day, you might want to make a few modifications to your email. You can minify your code, add UTM parameters, and much more with the flick of a few switches.
What would an email creation tool be without sending tests? Just two clicks to fire off a test email to your inbox! Another two clicks and you'll have the original MJML file and the outputted HTML saved to your local system!
We are really proud of the coding experience we've created for MJML and we know it will help you create amazing emails, even faster!
Happy sending,
Avi Goldman
Founder