What is MJML?
MJML stands for "Mailjet Markup Language.” It’s an open-source framework to help code responsive emails so they read correctly across different email clients and devices.
What is the purpose of MJML?
MJML has been designed to reduce the pain of coding a responsive email. It uses semantic syntax and a rich standard components library, including things like an interactive image gallery.
How does MJML work?
MJML is a transpiler. Its engine, which was built in ReactJS, takes the MJML (Mailjet Markup Language) as an input and outputs HTML. The generated HTML is email responsive and compatible with most email clients.
- HTML for email is a whole different ball game from the HTML you’re probably familiar with from the web. It’s still stuck back in the ‘90s, with clunky table nesting and client-specific CSS tags.
- It’s getting trickier - or just more frustrating, to develop emails these days, nevermind responsive email.
- With a growing number of mobile devices and email clients consumers are reading their email on, it’s more important than ever to get design right.
MJML takes all of these issues into account.
How do I use MJML?
MJML will enable you to write high-level code to generate responsive HTML in two ways:
- Online: An online editor enables you to write MJML and render the corresponding responsive HTML. Click on "Compile to HTML" and look at the right panel to see how your email will look on different devices. When you are done editing your MJML, click on the "HTML" toggle button on the top left of your screen to see the responsive HTML generated by the engine: all you have to do now is save it!
- Offline: Download the engine on your computer in order to execute it locally. It is a binary file that you can use to transpile your MJML code into HTML.
What we love about MJML:
- You can write less code, save time and code more efficiently with MJML’s semantic syntax.
- MJML is responsive by design on most popular email clients, even Outlook. (Outlook PC requires a little love yet.)
- You can write high-level code thanks to reusable and extensible components.
Some drawbacks of MJML:
- It has a default of 600px wide layout. Requires additional markup to alter and may break layouts when rendering MJML.
- It can only go up to 4 columns wide. If you force more, it may break layout on render and require additional programming to fix.
We’ve coded these emails more efficiently using MJML, incorporating animation elements and more. Contact us to see how we could make your emails more efficient, attractive and responsive.