Email Template Builder

Professional drag-and-drop email designer

Back

Basic Components

Heading
Title text
Text
Paragraph
Button
Call-to-action
Image
Picture
Divider
Separator line

Advanced

2 Columns
Side by side
Product
Product card
Social Links
Social icons
Footer
Email footer

Properties

Select a component to edit its properties

Email Preview ${html} `); } function saveTemplate() { const name = prompt('Template name:'); if (!name) return; const template = { name: name, html: builder.canvas.innerHTML, created: new Date().toISOString() }; // Save to localStorage const templates = JSON.parse(localStorage.getItem('email-templates') || '[]'); templates.push(template); localStorage.setItem('email-templates', JSON.stringify(templates)); builder.showNotification('Template saved successfully!', 'success'); } function exportHTML() { const html = builder.canvas.innerHTML; 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.html'; a.click(); URL.revokeObjectURL(url); builder.showNotification('HTML exported successfully!', 'success'); } function loadSavedTemplates() { const templates = JSON.parse(localStorage.getItem('email-templates') || '[]'); if (templates.length === 0) { alert('No saved templates found. Create and save a template first!'); return; } const modal = document.createElement('div'); modal.className = 'modal fade show'; modal.style.display = 'block'; modal.style.backgroundColor = 'rgba(0,0,0,0.5)'; modal.innerHTML = `
My Saved Templates
${templates.map((t, index) => `
💾

${t.name}

Saved: ${new Date(t.created).toLocaleDateString()}

`).join('')}
`; document.body.appendChild(modal); } function loadSavedTemplate(index) { const templates = JSON.parse(localStorage.getItem('email-templates') || '[]'); const template = templates[index]; if (!template) { alert('Template not found!'); return; } // Close modal document.querySelector('.modal').remove(); // Load template HTML builder.canvas.innerHTML = template.html; // Rebuild blocks array builder.blocks = []; builder.canvas.querySelectorAll('.email-block').forEach(block => { builder.blocks.push({ id: block.id, type: block.dataset.type, element: block }); }); builder.showNotification(`Template "${template.name}" loaded!`, 'success'); } function deleteSavedTemplate(index) { if (!confirm('Delete this template?')) return; const templates = JSON.parse(localStorage.getItem('email-templates') || '[]'); templates.splice(index, 1); localStorage.setItem('email-templates', JSON.stringify(templates)); // Refresh modal document.querySelector('.modal').remove(); loadSavedTemplates(); }