Script and Tools

Welcome Back

Enter your details to access your account.

OR
Forgot password?

By joining, you agree to our Terms of Service.

Writing

Email Template Generator

Pick from 20 professional templates, customize the text and colors, then copy or download clean, ready-to-send HTML.

Customize Your Email

Live Preview

HTML Output

\n'; }// ── RENDERING ────────────────────────────────────────────────────── function renderTemplateList() { const items = activeCategory === 'all' ? TEMPLATES : TEMPLATES.filter(t => t.category === activeCategory); els.list.innerHTML = items.map(function (t) { const active = t.id === activeTemplateId ? ' active' : ''; return '
' + '
' + '
' + t.name + '
' + '
'; }).join('');els.list.querySelectorAll('.etg-tpl-item').forEach(function (el) { el.addEventListener('click', function () { selectTemplate(el.getAttribute('data-id')); }); }); }function renderInputs() { els.inp.recipientName.value = fields.recipientName || ''; els.inp.yourName.value = fields.yourName || ''; els.inp.subject.value = fields.subject || ''; els.inp.body1.value = fields.body1 || ''; els.inp.body2.value = fields.body2 || ''; els.inp.buttonText.value = fields.buttonText || ''; els.inp.buttonLink.value = fields.buttonLink || ''; els.inp.accentColor.value = fields.accentColor || '#2563eb'; els.inp.companyName.value = fields.companyName || ''; els.logoHint.style.display = fields.logo ? 'block' : 'none'; }function renderPreview() { const html = buildEmailHTML(fields, getTemplate(activeTemplateId).layout); els.iframe.srcdoc = html; els.codeOutput.textContent = html; }function selectTemplate(id) { const tpl = getTemplate(id); activeTemplateId = tpl.id; // The uploaded logo is the user's own asset, not template content — keep it across template switches. fields = Object.assign({ logo: fields.logo || null }, tpl.defaults); renderTemplateList(); renderInputs(); renderPreview(); }// ── EVENTS ───────────────────────────────────────────────────────── Object.keys(els.inp).forEach(function (key) { els.inp[key].addEventListener('input', function (e) { fields[key] = e.target.value; renderPreview(); }); });els.catTabs.addEventListener('click', function (e) { const btn = e.target.closest('.etg-cat-tab'); if (!btn) return; els.catTabs.querySelectorAll('.etg-cat-tab').forEach(function (b) { b.classList.remove('active'); }); btn.classList.add('active'); activeCategory = btn.getAttribute('data-cat'); renderTemplateList(); });els.deviceToggle.addEventListener('click', function (e) { const btn = e.target.closest('.etg-device-btn'); if (!btn) return; els.deviceToggle.querySelectorAll('.etg-device-btn').forEach(function (b) { b.classList.remove('active'); }); btn.classList.add('active'); device = btn.getAttribute('data-device'); els.iframe.classList.toggle('etg-device-mobile', device === 'mobile'); });els.copyBtn.addEventListener('click', function () { const html = buildEmailHTML(fields, getTemplate(activeTemplateId).layout); navigator.clipboard.writeText(html).then(function () { const original = els.copyBtn.innerHTML; els.copyBtn.innerHTML = ' Copied!'; setTimeout(function () { els.copyBtn.innerHTML = original; }, 1800); }).catch(function () { alert('Could not copy automatically. Please select and copy the code manually.'); }); });els.downloadBtn.addEventListener('click', function () { const html = buildEmailHTML(fields, getTemplate(activeTemplateId).layout); const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'email-template-' + activeTemplateId + '.html'; a.click(); URL.revokeObjectURL(url); });els.logoInput.addEventListener('change', function (e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function (evt) { fields.logo = evt.target.result; els.logoHint.style.display = 'block'; renderPreview(); }; reader.readAsDataURL(file); });els.logoRemove.addEventListener('click', function (e) { e.preventDefault(); fields.logo = null; els.logoInput.value = ''; els.logoHint.style.display = 'none'; renderPreview(); });function scrollToPreview() { els.previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); } els.scrollPreviewBtn.addEventListener('click', scrollToPreview); els.floatPreviewBtn.addEventListener('click', scrollToPreview);// ── INIT ─────────────────────────────────────────────────────────── renderTemplateList(); renderInputs(); renderPreview(); })();
Overview

What Is Email Template Generator?

Create, customize and download professional HTML email templates for job applications, newsletters, business emails and more.

Advertisement