{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/mandrill/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"MJML","siteUrl":"https://dev.mailjet.com/","projectTitle":"Mailjet Developer Documentation","description":"MJML is Mailjet's open-source responsive email framework. See how MJML markup compiles to cross-client HTML ready to send through the Mailjet API or SMTP relay.","image":"https://dev.mailjet.com/og-image.png","lang":"en-US","keywords":["Mailjet API","Email API","Content API","SMTP Relay","transactional email","email delivery","Send API","email templates","developer documentation"],"meta":[{"name":"og:type","content":"website"},{"name":"og:site_name","content":"Mailjet Developer Documentation"},{"name":"twitter:card","content":"summary_large_image"},{"name":"robots","content":"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"},{"name":"googlebot","content":"index, follow, max-snippet:-1, max-image-preview:large"}],"jsonLd":{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://dev.mailjet.com/#organization","name":"Mailjet","alternateName":"Sinch Mailjet","url":"https://www.mailjet.com","logo":"https://assets.mailjet.com/lib/images/mailjetLogo/mj_logo_with_text_color.png","parentOrganization":{"@type":"Organization","name":"Sinch","url":"https://www.sinch.com"}},{"@type":"WebSite","@id":"https://dev.mailjet.com/#website","name":"Mailjet Developer Documentation","description":"Official developer documentation for the Mailjet Email API, Content API and SMTP Relay.","url":"https://dev.mailjet.com/","inLanguage":"en-US","publisher":{"@id":"https://dev.mailjet.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://dev.mailjet.com/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]},"llmstxt":{"hide":false,"title":"Mailjet Developer Documentation","description":"Developer documentation for the Mailjet Email API, Content API and SMTP Relay - guides, API references and code samples for sending, templating and tracking email at scale.","details":{"content":"Mailjet (part of Sinch) provides APIs for sending and managing email.\n\nThis documentation covers four main areas:\n\n- **Email API** - the Send API (v3 and v3.1) for transactional and marketing email,\n  plus contact management, segmentation, campaigns, statistics, webhooks, the Parse API\n  and the Mailjet Templating Language.\n- **Content API** - programmatic management of email templates, template contents,\n  images, labels and authentication tokens (v1).\n- **SMTP Relay** - sending through Mailjet's SMTP servers, including custom headers.\n- **API Reference** - the complete, generated reference for every endpoint, built directly\n  from the OpenAPI specifications.\n\nBase URL for all REST APIs: `https://api.mailjet.com`.\nAuthentication uses HTTP Basic auth with an API key and secret key.\n\n## Machine-readable entry points\n\nPrefer these when you need the API surface in as few requests as possible:\n\n- `/openapi/openapi-mailjet.md` - the **complete** Email API reference (every endpoint,\n  grouped by resource) as a single Markdown document.\n- `/openapi/openapi-passport.md` - the **complete** Content API reference as a single\n  Markdown document.\n- `/_bundle/openapi/openapi-mailjet.yaml` - the raw, fully bundled OpenAPI 3 description\n  of the Email API.\n- `/_bundle/openapi/openapi-passport.yaml` - the raw, fully bundled OpenAPI 3 description\n  of the Content API.\n- `/sitemap.xml` - every indexable URL on this site.\n\nEvery page on this site is also available as clean Markdown by appending `.md` to its URL."},"sections":[{"title":"Email API","description":"Sending, contacts, campaigns, statistics, webhooks and templating.","includeFiles":["docs/email-api/**/*.md"],"excludeFiles":[]},{"title":"Content API","description":"Manage templates, template contents, images, labels and tokens.","includeFiles":["docs/content-api/**/*.md","docs/content-api.md"],"excludeFiles":[]},{"title":"SMTP Relay","description":"Send email through Mailjet's SMTP servers.","includeFiles":["docs/smtp-relay/**/*.md"],"excludeFiles":[]},{"title":"API Reference","description":"Complete generated reference for every Mailjet API endpoint.","includeFiles":["openapi/openapi-mailjet.yaml","openapi/openapi-passport.yaml","docs/api-reference/**/*.md"],"excludeFiles":[]},{"title":"Migrating from Mandrill","description":"Guides for switching from Mandrill to Mailjet.","includeFiles":["docs/mandrill/**/*.md"],"excludeFiles":[]}],"excludeFiles":[]},"priority":0.3},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"mjml","__idx":0},"children":["MJML"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!-- MJML -->\n<mj-body>\n  <mj-section>\n    <mj-column>\n      <mj-image src=\"/assets/img/logo-small.png\"></mj-image>\n\n      <mj-divider border-color=\"#F45E43\"></mj-divider>\n\n      <mj-text font-size=\"20px\" color=\"#F45E43\" font-family=\"helvetica\"\n        >Hello World</mj-text\n      >\n    </mj-column>\n  </mj-section>\n</mj-body>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["becomes"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!-- HTML -->\n<!DOCTYPE html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n  <head>\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n    <title>undefined</title>\n    <style type=\"text/css\">\n      #outlook a {\n        padding: 0;\n      }\n      .ReadMsgBody {\n        width: 100%;\n      }\n      .ExternalClass {\n        width: 100%;\n      }\n      .ExternalClass * {\n        line-height: 100%;\n      }\n      body {\n        margin: 0;\n        padding: 0;\n        -webkit-text-size-adjust: 100%;\n        -ms-text-size-adjust: 100%;\n      }\n      table,\n      td {\n        border-collapse: collapse;\n        mso-table-lspace: 0pt;\n        mso-table-rspace: 0pt;\n      }\n      img {\n        border: 0;\n        height: auto;\n        line-height: 100%;\n        outline: none;\n        text-decoration: none;\n        -ms-interpolation-mode: bicubic;\n      }\n      p {\n        display: block;\n        margin: 13px 0;\n      }\n      @media only screen and (min-width: 480px) {\n        .mj-2column,\n        * [aria-labelledby='mj-2column'] {\n          width: 50% !important;\n        }\n        .mj-3column,\n        * [aria-labelledby='mj-3column'] {\n          width: 33.3333% !important;\n        }\n        .mj-4column,\n        * [aria-labelledby='mj-4column'] {\n          width: 25% !important;\n        }\n      }\n    </style>\n    <!--[if !mso]><!-->\n    <style type=\"text/css\">\n      @import url(\n        https://fonts.googleapis.com/css?family=Ubuntu:400,\n        500,\n        700,\n        300\n      );\n    </style>\n    <style type=\"text/css\">\n      @media only screen and (max-width: 480px) {\n        @-ms-viewport {\n          width: 320px;\n        }\n        @viewport {\n          width: 320px;\n        }\n      }\n    </style>\n    <link\n      href=\"https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300\"\n      rel=\"stylesheet\"\n      type=\"text/css\"\n    />\n    <!--<![endif]-->\n    <style type=\"text/css\">\n      @media only screen and (min-width: 480px) {\n      }\n    </style>\n  </head>\n  <body id=\"YIELD_MJML\" style=\"\">\n    <div class=\"mj-body\">\n      <!--[if mso]>\n  \t\t<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" align=\"center\" style=\"width:600px;\"><tr><td>\n  \t\t<![endif]-->\n      <div style=\"margin:0 auto;max-width:600px;\">\n        <table\n          class=\"\"\n          cellpadding=\"0\"\n          cellspacing=\"0\"\n          style=\"width:100%;font-size:0px;\"\n          align=\"center\"\n        >\n          <tbody>\n            <tr>\n              <td\n                style=\"text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;\"\n              >\n                <!--[if mso]>\n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td style=\"width:600px;\">\n      <![endif]-->\n                <div\n                  style=\"vertical-align:top;display:inline-block;font-size:13px;text-align:left;\"\n                  class=\"mj-1column\"\n                  aria-labelledby=\"mj-1column\"\n                  data-column-width=\"NaN\"\n                >\n                  <table width=\"100%\">\n                    <tbody>\n                      <tr>\n                        <td\n                          style=\"font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;\"\n                          align=\"center\"\n                        >\n                          <table\n                            cellpadding=\"0\"\n                            cellspacing=\"0\"\n                            style=\"border-collapse:collapse;border-spacing:0px;\"\n                            align=\"center\"\n                          >\n                            <tbody>\n                              <tr>\n                                <td>\n                                  <img\n                                    alt=\"\"\n                                    src=\"/assets/img/logo-small.png\"\n                                    style=\"border:none;display:block;outline:none;text-decoration:none;max-width:NaN;\"\n                                  />\n                                </td>\n                              </tr>\n                            </tbody>\n                          </table>\n                        </td>\n                      </tr>\n                      <tr>\n                        <td\n                          style=\"font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;\"\n                        >\n                          <div\n                            style=\"height:0px;font-size:1px;border-color:#F45E43;border-style:solid;border-width:4px 0 0;margin-bottom:30px;margin-left:10px;margin-right:10px;margin-top:30px;\"\n                          ></div>\n                        </td>\n                      </tr>\n                      <tr>\n                        <td\n                          style=\"font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;\"\n                          align=\"left\"\n                        >\n                          <div\n                            class=\"mj-content\"\n                            style=\"cursor:auto;color:#F45E43;font-family:helvetica;font-size:20px;line-height:22px;\"\n                          >\n                            Hello World\n                          </div>\n                        </td>\n                      </tr>\n                    </tbody>\n                  </table>\n                </div>\n                <!--[if mso]>\n      </td></tr></table>\n      <![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <!--[if mso]>\n  \t\t</td></tr></table>\n  \t\t<![endif]-->\n    </div>\n  </body>\n</html>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/logo_mjml.94cffb4896896048a65a426667b2fc699842265e12a41d8a9a094f16ad618277.a41383dd.png","alt":"/images/logo_mjml.png"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML's open-source engine generates high quality responsive HTML compliant with best practices."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/mjml_screen.8d670e92400adeb447f5775396ef7809cc711c20ae588e9c667f720f1b268c1a.a41383dd.png","alt":"/images/mjml_screen.png"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Visit ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://mjml.io"},"children":["mjml.io"]}," for more details about this open source project initiated by the Mailjet development team."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Find the mjml repository on ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/mjmlio/mjml"},"children":["Github"]},"."]}]},"headings":[{"value":"MJML","id":"mjml","depth":1}],"frontmatter":{"title":"Mjml","seo":{"description":"MJML is Mailjet's open-source responsive email framework. See how MJML markup compiles to cross-client HTML ready to send through the Mailjet API or SMTP relay.","priority":0.3,"title":"MJML"}},"lastModified":"2026-08-26T10:53:57.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/mandrill/mjml","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}