MJML (Mailjet Markup Language) is an open-source framework described as the only framework that makes responsive email easy. It was created to abstract the complexity of responsive HTML and automatically generate it, redefining the coding experience for email.

Here are the principal characteristics of the MJML tool:

1. Purpose and Rationale

MJML was created by a team of Mailjet developers in early 2015 to tackle the difficulty of coding responsive email. The creation was necessary because responsive email is hard, largely due to the fact that HTML for email is very different from standard web HTML. Each email client renders HTML in its own way, and some issues, like Gmail removing the entire header section where CSS might be placed, complicate design and guarantee.

The framework was designed because the Mailjet team recognized two major trends: a) email HTML is antiquated and not developer-friendly, and b) the growing number of screens (mobile, tablet, smartwatches, and potentially VR devices) on which email is viewed.

2. Core Functionality: Transpilation and Responsiveness

MJML is essentially an engine transpiling <mj-*>-style markup language into responsive email HTML with nested tables and inline CSS.

• Responsive by Default: MJML is responsive by design on most popular email clients, even Outlook. It ensures that the user's MJML will always be up-to-date and responsive. The engine reads the sections of the email and their intended appearance, then handles the rendering in a responsive way.

• Abstraction of Complexity: It rolls up the lessons learned by the Mailjet Developer team concerning HTML email design, abstracting the entire layer of complexity related to responsive email design. MJML handles the regular updates to email client specifications and requirements, allowing users to spend less time reading up on the latest changes.

3. Efficiency and Semantic Syntax

MJML allows users to write less code, save time, and code more efficiently.

• Semantic Syntax: It uses a semantic syntax that boosts speed and productivity. Users can build a responsive email using simple tags like <mj-section> and <mj-column>, avoiding endless HTML table nesting or email client-specific CSS.

4. Component-Based Structure

The framework utilizes a component-based structure, which allows users to write high-level code through reusable and extensible components.

• Focus on Content: By using MJML components, developers can focus on the content rather than the tricky part of styling.

• Component Examples: It includes low-level components, such as <mj-image>, and higher-level components, like <mj-article>. For example, including an article requires only specifying attributes like a link to an image, a title, a description, and a link to the article within the <mj-article> tag.

• Customization: Users can quickly integrate components natively included in MJML, and they can also build their own custom components.

5. Technology and Community

• Technology Stack: The MJML engine was built in React.js due to the platform's high composability and how it handles components, making it easy to extend and reuse high-level components.

• Open Source: MJML is an open-source framework that was shared with the community to make responsive email easier. The source code is available on Github, where the community is encouraged to contribute to the engine and its components.

• Support: MJML is proudly powered by Mailjet and is widely used and well-supported.