curl --request POST \
--url https://api.iotools.cloud/v1/tool/mjml-to-responsive-email-html-converter \
--header 'Authorization: Bearer <token>' \
--header 'Content-Type: application/json' \
--data '
{
"mjmlInput": "<mjml><mj-body><mj-section><mj-column><mj-text>Hello world</mj-text></mj-column></mj-section></mj-body></mjml>",
"outputStyle": "beautify",
"validationLevel": "soft",
"keepComments": ""
}
'{
"tool": "mjml-to-responsive-email-html-converter",
"tool_version": "1.0.1",
"outputs": {
"html": "<!doctype html>\n<html lang=\"und\" dir=\"auto\" xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n\n<head>\n <title></title>\n <!--[if !mso]><!-->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <!--<![endif]-->\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <style type=\"text/css\">\n #outlook a {\n padding: 0;\n }\n\n body {\n margin: 0;\n padding: 0;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n }\n\n table,\n td {\n border-collapse: collapse;\n mso-table-lspace: 0pt;\n mso-table-rspace: 0pt;\n }\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\n p {\n display: block;\n margin: 13px 0;\n }\n </style>\n <!--[if mso]>\n <noscript>\n <xml>\n <o:OfficeDocumentSettings>\n <o:AllowPNG/>\n <o:PixelsPerInch>96</o:PixelsPerInch>\n </o:OfficeDocumentSettings>\n </xml>\n </noscript>\n <![endif]-->\n <!--[if lte mso 11]>\n <style type=\"text/css\">\n .mj-outlook-group-fix { width:100% !important; }\n </style>\n <![endif]-->\n <!--[if !mso]><!-->\n <link href=\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n <style type=\"text/css\">\n @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\n </style>\n <!--<![endif]-->\n <style type=\"text/css\">\n @media only screen and (min-width:480px) {\n .mj-column-per-100 {\n width: 100% !important;\n max-width: 100%;\n }\n }\n </style>\n <style media=\"screen and (min-width:480px)\">\n .moz-text-html .mj-column-per-100 {\n width: 100% !important;\n max-width: 100%;\n }\n </style>\n</head>\n\n<body style=\"word-spacing:normal;\">\n <div aria-roledescription=\"email\" style=\"\" role=\"article\" lang=\"und\" dir=\"auto\">\n <!--[if mso | IE]><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" role=\"presentation\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n <div style=\"margin:0px auto;max-width:600px;\">\n <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n <tbody>\n <tr>\n <td style=\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;\">\n <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n <div class=\"mj-column-per-100 mj-outlook-group-fix\" style=\"font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\">\n <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"vertical-align:top;\" width=\"100%\">\n <tbody>\n <tr>\n <td align=\"left\" style=\"font-size:0px;padding:10px 25px;word-break:break-word;\">\n <div style=\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\">Hello world</div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <!--[if mso | IE]></td></tr></table><![endif]-->\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <!--[if mso | IE]></td></tr></table><![endif]-->\n </div>\n</body>\n\n</html>",
"messages": []
},
"credits_used": 3,
"credits_remaining": null
}Converters
MJML to Responsive Email HTML Converter
Compile MJML markup into production-ready, responsive HTML email. Paste an MJML document and get clean HTML with Outlook (MSO) conditionals, inline styles and media queries — choose beautified, minified or raw output and a validation level. Runs entirely in your browser.
Try MJML to Responsive Email HTML Converter in your browser →
POST
/
v1
/
tool
/
mjml-to-responsive-email-html-converter
curl --request POST \
--url https://api.iotools.cloud/v1/tool/mjml-to-responsive-email-html-converter \
--header 'Authorization: Bearer <token>' \
--header 'Content-Type: application/json' \
--data '
{
"mjmlInput": "<mjml><mj-body><mj-section><mj-column><mj-text>Hello world</mj-text></mj-column></mj-section></mj-body></mjml>",
"outputStyle": "beautify",
"validationLevel": "soft",
"keepComments": ""
}
'{
"tool": "mjml-to-responsive-email-html-converter",
"tool_version": "1.0.1",
"outputs": {
"html": "<!doctype html>\n<html lang=\"und\" dir=\"auto\" xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n\n<head>\n <title></title>\n <!--[if !mso]><!-->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <!--<![endif]-->\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <style type=\"text/css\">\n #outlook a {\n padding: 0;\n }\n\n body {\n margin: 0;\n padding: 0;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n }\n\n table,\n td {\n border-collapse: collapse;\n mso-table-lspace: 0pt;\n mso-table-rspace: 0pt;\n }\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\n p {\n display: block;\n margin: 13px 0;\n }\n </style>\n <!--[if mso]>\n <noscript>\n <xml>\n <o:OfficeDocumentSettings>\n <o:AllowPNG/>\n <o:PixelsPerInch>96</o:PixelsPerInch>\n </o:OfficeDocumentSettings>\n </xml>\n </noscript>\n <![endif]-->\n <!--[if lte mso 11]>\n <style type=\"text/css\">\n .mj-outlook-group-fix { width:100% !important; }\n </style>\n <![endif]-->\n <!--[if !mso]><!-->\n <link href=\"https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n <style type=\"text/css\">\n @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);\n </style>\n <!--<![endif]-->\n <style type=\"text/css\">\n @media only screen and (min-width:480px) {\n .mj-column-per-100 {\n width: 100% !important;\n max-width: 100%;\n }\n }\n </style>\n <style media=\"screen and (min-width:480px)\">\n .moz-text-html .mj-column-per-100 {\n width: 100% !important;\n max-width: 100%;\n }\n </style>\n</head>\n\n<body style=\"word-spacing:normal;\">\n <div aria-roledescription=\"email\" style=\"\" role=\"article\" lang=\"und\" dir=\"auto\">\n <!--[if mso | IE]><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" role=\"presentation\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n <div style=\"margin:0px auto;max-width:600px;\">\n <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n <tbody>\n <tr>\n <td style=\"direction:ltr;font-size:0px;padding:20px 0;text-align:center;\">\n <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n <div class=\"mj-column-per-100 mj-outlook-group-fix\" style=\"font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;\">\n <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"vertical-align:top;\" width=\"100%\">\n <tbody>\n <tr>\n <td align=\"left\" style=\"font-size:0px;padding:10px 25px;word-break:break-word;\">\n <div style=\"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;\">Hello world</div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <!--[if mso | IE]></td></tr></table><![endif]-->\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <!--[if mso | IE]></td></tr></table><![endif]-->\n </div>\n</body>\n\n</html>",
"messages": []
},
"credits_used": 3,
"credits_remaining": null
}Authorizations
Bearer authentication header of the form Bearer <token>, where <token> is your auth token.
Body
application/json
Response
Tool output
Show child attributes
Show child attributes
The tool's slug, echoing the {slug} in the request path.
Output-contract version for this tool.
Credits this call consumed, after any settlement refund. 0 when metering is disabled.
Credits left in the current monthly allowance, or null when metering is disabled.
Correlation id, also sent as x-request-id.
Was this page helpful?
⌘I