HTML Email Template Builder

Build email-client-compatible HTML templates visually. Table-based layouts, live preview.

Add Section

Sections

Global Settings

HTML Email Code


  

    
    
  






    
🚀 Explore 269 Free Developer Tools

    
From CSS generators to JSON formatters — all free, no signup required.

    Browse All Tools →







Related Tools


CSS Box Shadow Generator · Emoji Picker & Search · Free JSON Formatter & Validator · Meta Tag Generator · Favicon Generator








Related Tools


Free Icon Generator · Free HTML Email Template Builder · Free Accessibility Checker








Related Tools


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








Related Tools


Free JSON to YAML Converter · YAML to JSON Converter · Free ASCII Art Generator







Copied!



`;
  const iframe = document.getElementById('preview');
  const doc = iframe.contentDocument;
  doc.open(); doc.write(html); doc.close();
  document.getElementById('output').textContent = html;
}

function loadTemplate(name) {
  document.querySelectorAll('.tmpl-btn').forEach(b => b.classList.remove('active'));
  event.target.classList.add('active');
  sections = []; activeIdx = -1;
  if (name === 'newsletter') {
    addSection('header'); sections[sections.length-1].title='Weekly Digest'; sections[sections.length-1].subtitle='Your top stories this week';
    addSection('text'); sections[sections.length-1].content='Hi there,

Here is what happened this week in our community.';
    addSection('image');
    addSection('text'); sections[sections.length-1].content='Feature Article
We launched a brand new dashboard with improved analytics and real-time monitoring capabilities.';
    addSection('button'); sections[sections.length-1].text='Read More';
    addSection('divider');
    addSection('twocol'); sections[sections.length-1].leftContent='Tip of the Week
Use keyboard shortcuts to boost your productivity.'; sections[sections.length-1].rightContent='Event
Join our webinar this Thursday at 3pm EST.';
    addSection('footer');
  } else if (name === 'announcement') {
    addSection('header'); sections[sections.length-1].title='Big Announcement'; sections[sections.length-1].subtitle='Something exciting is coming'; sections[sections.length-1].bgColor='#a855f7';
    addSection('spacer');
    addSection('text'); sections[sections.length-1].content='We are thrilled to announce our latest product update that will transform how you work.'; sections[sections.length-1].fontSize='18';
    addSection('button'); sections[sections.length-1].text='Learn More'; sections[sections.length-1].bgColor='#a855f7';
    addSection('spacer');
    addSection('footer');
  } else if (name === 'welcome') {
    addSection('header'); sections[sections.length-1].title='Welcome Aboard!'; sections[sections.length-1].subtitle='We are glad to have you'; sections[sections.length-1].bgColor='#22c55e';
    addSection('text'); sections[sections.length-1].content='Hi [Name],

Thank you for signing up. Here are 3 things you can do right now:';
    addSection('text'); sections[sections.length-1].content='1. Complete your profile
2. Explore the dashboard
3. Invite your team members';
    addSection('button'); sections[sections.length-1].text='Get Started'; sections[sections.length-1].bgColor='#22c55e';
    addSection('divider');
    addSection('footer');
  } else if (name === 'receipt') {
    addSection('header'); sections[sections.length-1].title='Payment Receipt'; sections[sections.length-1].subtitle='Order #12345'; sections[sections.length-1].bgColor='#1e293b';
    addSection('text'); sections[sections.length-1].content='Date: January 15, 2026
Amount: $49.00
Method: Visa ending in 4242';
    addSection('divider');
    addSection('twocol'); sections[sections.length-1].leftContent='Item
Pro Plan (Annual)'; sections[sections.length-1].rightContent='Total
$49.00';
    addSection('divider');
    addSection('button'); sections[sections.length-1].text='View Invoice'; sections[sections.length-1].bgColor='#1e293b';
    addSection('footer'); sections[sections.length-1].content='Questions? Reply to this email or contact [email protected]';
  }
  activeIdx = -1;
  refreshList();
  document.getElementById('editor').classList.remove('show');
  render();
}

function copyOutput() {
  navigator.clipboard.writeText(document.getElementById('output').textContent);
  showToast('HTML copied!');
}

function downloadOutput() {
  const blob = new Blob([document.getElementById('output').textContent], { type: 'text/html' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'email-template.html';
  a.click();
}

function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2000);
}

render();