Free Email Template Builder

Build responsive HTML email templates visually. Click to add sections like headers, heroes, text blocks, images, buttons, and footers. Customize colors and fonts, preview on desktop and mobile, then export email-safe HTML with inline CSS. No signup required.

Add Sections
Section Order0
Theme & Colors
Light
Dark
Warm
Cool
#ffffff
#ffffff
#333333
#00d4ff
Live Preview

Edit Section

Need something more powerful?

Let us build it for you. Custom APIs, dashboards, automations — whatever you need.

Start a Project →
Open source

NexTool on GitHub

269 free tools. No signup. Open source. Built by Christian Bucher.

GitHub Browse 269 Free Tools →

Related Tools

CSS Box Shadow Generator · Emoji Picker & Search · Favicon Generator

Related Tools

Free Icon Generator · Free JSON to YAML Converter · Free Accessibility Checker

Related Tools

Free JSON to YAML Converter · YAML to JSON Converter · Free API Request Builder

\n'; return html; } function renderSection(s, w, font) { var h = ''; switch(s.type) { case 'header': h += '\n'; h += '
\n'; if (s.logoUrl) { h += ''+esc(s.logo)+'\n'; } else { h += '

'+esc(s.logo)+'

\n'; } if (s.tagline) { h += '

'+esc(s.tagline)+'

\n'; } h += '
\n'; break; case 'hero': var heroBg = s.bgImage ? 'background-image:url('+esc(s.bgImage)+');background-size:cover;background-position:center;' : 'background-color:'+colors.accent+';'; h += '\n'; h += '
\n'; h += '

'+esc(s.heading)+'

\n'; h += '

'+esc(s.subheading)+'

\n'; if (s.btnText) { var heroBtnColor = s.bgImage ? '#ffffff' : getContrastColor(colors.accent); var heroBtnBg = s.bgImage ? 'rgba(255,255,255,0.2)' : (isLightColor(colors.accent) ? '#333333' : '#ffffff'); var heroBtnTextC = s.bgImage ? '#ffffff' : (isLightColor(colors.accent) ? '#ffffff' : '#333333'); h += '\n'; h += '
\n'; h += ''+esc(s.btnText)+'\n'; h += '
\n'; } h += '
\n'; break; case 'text': h += '\n'; h += '
\n'; if (s.heading) { h += '

'+esc(s.heading)+'

\n'; } h += '

'+escNl(s.body)+'

\n'; h += '
\n'; break; case 'image': h += '\n'; h += '
\n'; if (s.link) h += ''; h += ''+esc(s.alt)+''; if (s.link) h += ''; h += '\n
\n'; break; case 'button': h += '\n'; h += '
\n'; h += '\n'; h += '
\n'; h += ''+esc(s.text)+'\n'; h += '
\n'; h += '
\n'; break; case 'divider': h += '\n'; h += '
\n'; h += '
\n'; h += '
\n'; break; case 'social': h += '\n'; h += '
\n'; var links = []; if (s.twitter) links.push({name:'Twitter',url:s.twitter}); if (s.facebook) links.push({name:'Facebook',url:s.facebook}); if (s.linkedin) links.push({name:'LinkedIn',url:s.linkedin}); if (s.instagram) links.push({name:'Instagram',url:s.instagram}); if (s.website) links.push({name:'Website',url:s.website}); for (var li = 0; li < links.length; li++) { if (li > 0) h += '  |  '; h += ''+links[li].name+''; } h += '\n
\n'; break; case 'footer': h += '\n'; h += '
\n'; h += '

'+esc(s.company)+'

\n'; h += '

'+esc(s.address)+'

\n'; h += '

'+esc(s.text)+'

\n'; if (s.unsubscribe) { h += '

Unsubscribe

\n'; } h += '
\n'; break; case 'columns': h += '\n'; h += '\n'; h += '\n'; h += '\n'; h += '
\n'; if (s.leftHeading) h += '

'+esc(s.leftHeading)+'

\n'; h += '

'+esc(s.leftBody)+'

\n'; h += '		\n'; if (s.rightHeading) h += '

'+esc(s.rightHeading)+'

\n'; h += '

'+esc(s.rightBody)+'

\n'; h += '
\n'; break; case 'spacer': var sh = parseInt(s.height) || 30; h += '\n'; h += '
 
\n'; break; } return h; } /* ============ COLOR HELPERS ============ */ function hexToRgb(hex) { hex = hex.replace('#',''); if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; var r = parseInt(hex.substring(0,2),16); var g = parseInt(hex.substring(2,4),16); var b = parseInt(hex.substring(4,6),16); return {r:r,g:g,b:b}; } function luminance(hex) { var rgb = hexToRgb(hex); return (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255; } function isLightColor(hex) { return luminance(hex) > 0.5; } function getContrastColor(hex) { return isLightColor(hex) ? '#333333' : '#ffffff'; } function adjustAlpha(hex) { // Return a slightly transparent version for subtext return hex === '#ffffff' ? 'rgba(255,255,255,0.85)' : 'rgba(51,51,51,0.75)'; } function mixColor(c1, c2) { var a = hexToRgb(c1), b = hexToRgb(c2); var r = Math.round((a.r + b.r) / 2); var g = Math.round((a.g + b.g) / 2); var bl = Math.round((a.b + b.b) / 2); return '#' + ((1<<24)+(r<<16)+(g<<8)+bl).toString(16).slice(1); } /* ============ UTILITIES ============ */ function esc(s) { if (!s) return ''; var d = document.createElement('div'); d.appendChild(document.createTextNode(s)); return d.innerHTML; } function escNl(s) { return esc(s).replace(/\n/g, '
'); } /* ============ EXPORT / COPY / SEND ============ */ function exportHTML() { if (sections.length === 0) { showToast('Add sections first'); return; } var html = generateEmailHTML(); var blob = new Blob([html], {type:'text/html'}); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'email-template.html'; a.click(); URL.revokeObjectURL(a.href); showToast('Downloaded email-template.html'); } function copyHTML() { if (sections.length === 0) { showToast('Add sections first'); return; } var html = generateEmailHTML(); navigator.clipboard.writeText(html).then(function(){ showToast('HTML copied to clipboard'); }); } function sendTestEmail() { if (sections.length === 0) { showToast('Add sections first'); return; } var subject = encodeURIComponent('Email Template Preview'); var body = encodeURIComponent('Open the attached HTML file in a browser to preview your email template. (Mailto links cannot send HTML email bodies directly - use the Export HTML button and paste the code into your email service provider.)'); window.location.href = 'mailto:?subject=' + subject + '&body=' + body; showToast('Opening email client. Paste the exported HTML into your ESP.'); } /* ============ TEMPLATES ============ */ function loadTemplate(name) { sections = []; switch(name) { case 'newsletter': addSection('header'); addSection('hero'); sections[sections.length-1].heading = 'Monthly Newsletter'; sections[sections.length-1].subheading = 'Here is what happened this month.'; addSection('text'); sections[sections.length-1].heading = 'Featured Article'; sections[sections.length-1].body = 'We are excited to share our latest insights with you. This month has been full of new developments and improvements that we think you will love.'; addSection('image'); addSection('text'); sections[sections.length-1].heading = 'What is Coming Next'; sections[sections.length-1].body = 'We have some exciting plans for next month including new features, community events, and exclusive content for our subscribers.'; addSection('button'); sections[sections.length-1].text = 'Read Full Article'; addSection('divider'); addSection('social'); addSection('footer'); break; case 'promo': addSection('header'); addSection('hero'); sections[sections.length-1].heading = 'Special Offer: 50% Off'; sections[sections.length-1].subheading = 'Limited time only. Do not miss out on this incredible deal.'; sections[sections.length-1].btnText = 'Shop Now'; addSection('divider'); addSection('columns'); sections[sections.length-1].leftHeading = 'Premium Plan'; sections[sections.length-1].leftBody = 'Get access to all features including priority support, unlimited usage, and exclusive content.'; sections[sections.length-1].rightHeading = 'Enterprise Plan'; sections[sections.length-1].rightBody = 'Custom solutions for your team with dedicated account manager and SLA guarantees.'; addSection('button'); sections[sections.length-1].text = 'Claim Your Discount'; addSection('spacer'); addSection('footer'); break; case 'transactional': addSection('header'); sections[sections.length-1].logo = 'Your App'; sections[sections.length-1].tagline = 'Order Confirmation'; addSection('text'); sections[sections.length-1].heading = 'Thank you for your order!'; sections[sections.length-1].body = 'Hi there,\n\nYour order #12345 has been confirmed and is being processed. You will receive a shipping notification once your items are on their way.\n\nOrder Total: $99.99\nEstimated Delivery: 3-5 business days'; addSection('divider'); addSection('button'); sections[sections.length-1].text = 'Track Your Order'; addSection('text'); sections[sections.length-1].heading = ''; sections[sections.length-1].body = 'If you have any questions about your order, please contact our support team. We are here to help!'; addSection('divider'); addSection('footer'); sections[sections.length-1].text = 'This is a transactional email regarding your recent purchase.'; break; } renderSectionList(); renderPreview(); showToast('Loaded ' + name + ' template'); } function clearAll() { sections = []; renderSectionList(); renderPreview(); showToast('Cleared all sections'); } /* ============ TOAST ============ */ function showToast(msg) { var t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(function(){ t.classList.remove('show'); }, 2000); } /* ============ INIT ============ */ renderSectionList(); renderPreview(); // Close edit modal on overlay click document.getElementById('editOverlay').addEventListener('click', function(e) { if (e.target === this) closeEdit(); }); // Close on escape document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeEdit(); }); /* IntersectionObserver fade-in */ var observer = new IntersectionObserver(function(entries){ entries.forEach(function(entry){if(entry.isIntersecting){entry.target.classList.add('visible');observer.unobserve(entry.target);}}); },{threshold:0.1}); document.querySelectorAll('.fade-in').forEach(function(el){observer.observe(el);});