Free business generator

MJML Responsive Email Designer

Build a responsive email starter and download a visual MJML editor that previews and exports email HTML.

Instant results
Private in your browser
PDF report included

MJML designer

Ready to download

A visual MJML editor is ready with a safe HTTPS action link and separate source and HTML downloads.

MJML lines: 17
Action link: Safe HTTPS
Compiler: mjml-browser 4.18.0

Email content
Part	Content
Subject	A new month at North Star
Heading	Fresh classes, familiar faces
Button	See the schedule
Footer	North Star Studio · 123 Main Street · Toronto

Ready to use

Review and make it yours

Edit the draft before publishing or sending it. Your changes stay on this device unless you copy or download them.

Copy-ready draft

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>MJML email designer</title><style>*{box-sizing:border-box}body{margin:0;background:#eef0ed;color:#17211d;font:16px/1.5 system-ui}.app{width:min(1200px,calc(100% - 24px));margin:auto;padding:32px 0}h1{font-size:clamp(42px,7vw,74px);line-height:.95;margin:0 0 24px}.layout{display:grid;grid-template-columns:minmax(320px,.8fr) 1.2fr;gap:18px}textarea,iframe{width:100%;height:68vh;border:1px solid #cbd4cf;border-radius:14px;background:white}textarea{padding:18px;font:14px/1.5 ui-monospace,monospace}iframe{display:block}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.actions button{padding:13px 17px;border:0;border-radius:10px;background:#315c4b;color:white;font-weight:800}.status{color:#67736d}@media(max-width:780px){.layout{grid-template-columns:1fr}textarea,iframe{height:55vh}}</style><main class="app"><h1>MJML email designer</h1><p>Edit the MJML, preview it, then download either source MJML or compiled email HTML.</p><div class="actions"><button id="preview">Update preview</button><button id="saveMjml">Download MJML</button><button id="saveHtml">Download email HTML</button></div><p class="status" id="status" role="status">Loading the MJML compiler…</p><div class="layout"><textarea id="source" aria-label="MJML source"></textarea><iframe id="frame" title="Responsive email preview"></iframe></div></main><script src="https://cdn.jsdelivr.net/npm/mjml-browser@4.18.0/lib/index.js"></script><script>const initial="\u003cmjml\u003e\n  \u003cmj-head\u003e\n    \u003cmj-title\u003eA new month at North Star\u003c/mj-title\u003e\n    \u003cmj-preview\u003eA new month at North Star\u003c/mj-preview\u003e\n    \u003cmj-attributes\u003e\u003cmj-all font-family=\"Arial, sans-serif\" /\u003e\u003cmj-text color=\"#52605a\" font-size=\"17px\" line-height=\"1.6\" /\u003e\u003c/mj-attributes\u003e\n  \u003c/mj-head\u003e\n  \u003cmj-body background-color=\"#f3f4f1\"\u003e\n    \u003cmj-section padding=\"32px 18px\"\u003e\u003cmj-column background-color=\"#ffffff\" border-radius=\"18px\" padding=\"42px\"\u003e\n      \u003cmj-text color=\"#315c4b\" font-weight=\"700\"\u003eNorth Star Studio\u003c/mj-text\u003e\n      \u003cmj-text color=\"#17211d\" font-size=\"38px\" font-weight=\"800\" line-height=\"1.05\"\u003eFresh classes, familiar faces\u003c/mj-text\u003e\n      \u003cmj-text\u003eWe added two Saturday classes and opened registration for our fall workshops. We would love to see you.\u003c/mj-text\u003e\n      \u003cmj-button background-color=\"#315c4b\" border-radius=\"10px\" href=\"https://example.com/schedule\"\u003eSee the schedule\u003c/mj-button\u003e\n      \u003cmj-divider border-color=\"#dde3df\" padding-top=\"26px\" /\u003e\n      \u003cmj-text font-size=\"12px\" color=\"#738079\"\u003eNorth Star Studio · 123 Main Street · Toronto\u003c/mj-text\u003e\n    \u003c/mj-column\u003e\u003c/mj-section\u003e\n  \u003c/mj-body\u003e\n\u003c/mjml\u003e",source=document.querySelector('#source'),frame=document.querySelector('#frame'),status=document.querySelector('#status');source.value=initial;let lastHtml='';function compile(){if(typeof window.mjml!=='function'){status.textContent='MJML compiler could not load. Check the connection and try again.';return}try{const result=window.mjml(source.value,{validationLevel:'soft'});lastHtml=result.html;frame.srcdoc=lastHtml;status.textContent=result.errors?.length?result.errors.length+' MJML warning(s) to review.':'Responsive email compiled with no MJML errors.'}catch(error){status.textContent='MJML could not compile: '+error.message}}function download(name,content,type){const url=URL.createObjectURL(new Blob([content],{type})),link=document.createElement('a');link.href=url;link.download=name;link.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}document.querySelector('#preview').onclick=compile;document.querySelector('#saveMjml').onclick=()=>download('email-template.mjml',source.value,'text/plain');document.querySelector('#saveHtml').onclick=()=>{compile();if(lastHtml)download('email-template.html',lastHtml,'text/html')};window.addEventListener('load',compile)</script></html>

176 words · 4215 characters

Use the result well

A clear answer, with the assumptions visible

These recommendations turn the result into an operational next step without hiding the inputs behind a score.

1
Open the downloaded designer with an internet connection for its first compiler load.
2
Send test emails to desktop and mobile inboxes.
3
Add unsubscribe handling and legally required sender details.

How this tool works

Create valid MJML from the entered content.
Load the stable MJML browser compiler in the downloaded visual editor.
Preview the responsive result and allow separate MJML and HTML downloads.

Build it in Bookify

Use this with every client

Keep forms, notes, messages, and follow-up connected in Bookify.

Set up client care

A clear answer, with the assumptions visible

How this tool works

Use this with every client

Related free tools