MJML Tests

MJML's website

https://mjml.io/

My test online preview:

https://mjml-exploration.netlify.app/

Claims of the framework :

MJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax.

• 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.
• Write high-level code thanks to reusable and extensible components.

Live Preview and linter inside VScode :

Basic example of abstraction made by MJML's components :

<!-- MJML -->
<mj-button href="#">
    Hello There!
</mj-button>

<!-- HTML -->
<table cellpadding="0" cellspacing="0" 
        style="border:none;
        border-radius:3px;" 
        align="center">
    <tbody>
        <tr>
            <td style="background-color:#414141;
            border-radius:3px;
            color:#ffffff;     
            cursor:auto;" 
            align="center" 
            valign="middle" 
            bgcolor="#414141">
                <a class="mj-content" href="#" 
                  style="display:inline-block;
                  text-decoration:none;
                  background-color:#414141;
                  border:1px solid #414141;
                  border-radius:3px;
                  color:#ffffff;
                  font-size:13px;
                  font-weight:bold;
                  padding:15px 30px;" 
                  target="_blank">
                    Hello There!
                </a>
            </td>
        </tr>
    </tbody>
</table>