MJML（Mailjet Markup Language）是一种专门用于编写响应式 HTML 邮件的标记语言。相当于是 HTML 在电子邮件场景下的更高层的封装，由编译器生成兼容各种邮箱客户端的 HTML。主要解决邮件 HTML 的痛点：

• Gmail / Outlook / Apple Mail 支持差异巨大
• 邮件需要大量 table 布局
• CSS inline 化复杂
• 移动端适配困难

注意：MJML 只负责 UI 不含模板功能。如果需要使用变量或者其他模板语法，可以另外选择任何一种语言进行渲染，比如 Node Handlebars，Golang 模板，Python Jinja2 等。

MJML 最初由法国邮件服务公司 Mailjet 在 2015 年开源。目前项目已经独立维护，属于开源生态：

• 语法：MJML
• 编译器：Node.js 实现
• 输出：标准 HTML Email

GitHub Repository: mjmlio/mjmlio

MJML 文件格式

扩展名：.mjml

<mjml>
  <mj-head>
    <mj-title>Welcome</mj-title>
  </mj-head>

  <mj-body>

    <mj-section>
      <mj-column>

        <mj-text font-size="20px">
          Hello Woody
        </mj-text>

        <mj-button href="https://example.com">
          Click
        </mj-button>

      </mj-column>
    </mj-section>

  </mj-body>
</mjml>

通过一下方法可以直接预览效果：

1. VSCode 拓展 [MJML Official]
2. 官方 MJML Live Editor
3. 自己实现 Preview 服务，AI 很容易生成一个

渲染 HTML

安装：

npm install -g mjml

转换：

mjml template.mjml -o template.html

生成的 HTML 会包含：

• table 布局
• inline style
• Outlook VML兼容代码
• media query