Examples

Real-World Examples

See how Mailyon is used in real applications. These examples show practical implementations using the actual available functionality.

Basic Integration

Simple drop-in usage of the email template builder.

import { EmailTemplateBuilder } from 'mailyon';

function MyEmailApp() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm border-b p-4">
        <h1 className="text-xl font-semibold">My Email Builder</h1>
      </div>
      <EmailTemplateBuilder />
    </div>
  );
}

Template Management with Local Storage

Save and load templates using browser localStorage.

import { EmailTemplateBuilder, useEmailTemplateBuilder, useEmailExport, useEmailTemplateManager } from 'mailyon';

function TemplateManager() {
  const { template, addComponent } = useEmailTemplateBuilder();
  const { exportAsJSON, exportAsHTML, downloadHTML } = useEmailExport();
  const { createNewTemplate, loadTemplateFromJSON, saveTemplateToStorage, loadTemplateFromStorage } = useEmailTemplateManager();

  const saveTemplate = () => {
    // Save to localStorage
    saveTemplateToStorage('myTemplate');
    alert('Template saved to browser storage!');
  };

  const loadTemplate = () => {
    // Load from localStorage
    const success = loadTemplateFromStorage('myTemplate');
    if (success) {
      alert('Template loaded from browser storage!');
    } else {
      alert('No template found in storage.');
    }
  };

  const downloadTemplate = () => {
    downloadHTML('my-email-template.html');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm border-b p-4">
        <div className="flex justify-between items-center">
          <h1 className="text-xl font-semibold">Template Manager</h1>
          <div className="space-x-3">
            <button 
              onClick={saveTemplate}
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
            >
              Save Template
            </button>
            <button 
              onClick={loadTemplate}
              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              Load Template
            </button>
            <button 
              onClick={downloadTemplate}
              className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
            >
              Download HTML
            </button>
            <button 
              onClick={() => createNewTemplate()}
              className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
            >
              New Template
            </button>
          </div>
        </div>
      </div>
      
      <EmailTemplateBuilder />
    </div>
  );
}

Programmatic Component Addition

Add components programmatically using the hooks.

import { EmailTemplateBuilder, useEmailTemplateBuilder, useEmailExport, useEmailTemplateManager } from 'mailyon';

function ProgrammaticBuilder() {
  const { template, addComponent } = useEmailTemplateBuilder();
  const { exportAsHTML, downloadHTML } = useEmailExport();
  const { createNewTemplate } = useEmailTemplateManager();

  const addHeader = () => {
    addComponent({
      id: Math.random().toString(36).substr(2, 9),
      type: 'header',
      props: {
        title: 'My Company',
        subtitle: 'Professional Email Templates',
        backgroundColor: '#3b82f6',
        textColor: '#ffffff',
        padding: '20px'
      },
      children: [],
      style: {}
    });
  };

  const addTextBlock = () => {
    addComponent({
      id: Math.random().toString(36).substr(2, 9),
      type: 'text',
      props: {
        content: 'This is a sample text block added programmatically. You can customize the content, styling, and formatting.',
        fontSize: '16px',
        textAlign: 'left',
        color: '#374151',
        padding: '15px'
      },
      children: [],
      style: {}
    });
  };

  const addButton = () => {
    addComponent({
      id: Math.random().toString(36).substr(2, 9),
      type: 'button',
      props: {
        text: 'Click Here',
        url: 'https://example.com',
        backgroundColor: '#059669',
        textColor: '#ffffff',
        borderRadius: '8px',
        padding: '12px 24px',
        fontSize: '16px'
      },
      children: [],
      style: {}
    });
  };

  const createNewsletterTemplate = () => {
    createNewTemplate('Newsletter Template');
    
    // Add header
    addHeader();
    
    // Add text block
    addTextBlock();
    
    // Add button
    addButton();
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm border-b p-4">
        <div className="flex justify-between items-center">
          <h1 className="text-xl font-semibold">Programmatic Builder</h1>
          <div className="space-x-3">
            <button 
              onClick={addHeader}
              className="px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
            >
              Add Header
            </button>
            <button 
              onClick={addTextBlock}
              className="px-3 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700"
            >
              Add Text
            </button>
            <button 
              onClick={addButton}
              className="px-3 py-2 bg-purple-600 text-white text-sm rounded hover:bg-purple-700"
            >
              Add Button
            </button>
            <button 
              onClick={createNewsletterTemplate}
              className="px-3 py-2 bg-orange-600 text-white text-sm rounded hover:bg-orange-700"
            >
              Create Newsletter
            </button>
            <button 
              onClick={() => downloadHTML('programmatic-template.html')}
              className="px-3 py-2 bg-gray-600 text-white text-sm rounded hover:bg-gray-700"
            >
              Download
            </button>
          </div>
        </div>
      </div>
      
      <EmailTemplateBuilder />
    </div>
  );
}

Custom Styling and Branding

Apply custom styling and branding to templates.

import { EmailTemplateBuilder, useEmailTemplateBuilder, useEmailExport } from 'mailyon';

function BrandedBuilder() {
  const { template, updateTemplateSettings } = useEmailTemplateBuilder();
  const { exportAsHTML, downloadHTML } = useEmailExport();

  const applyBranding = (brandColor: string, fontFamily: string) => {
    updateTemplateSettings({
      width: '700px',
      backgroundColor: brandColor,
      fontFamily: fontFamily
    });
  };

  const applyBlueTheme = () => {
    applyBranding('#f0f9ff', 'Arial, sans-serif');
  };

  const applyGreenTheme = () => {
    applyBranding('#f0fdf4', 'Georgia, serif');
  };

  const applyPurpleTheme = () => {
    applyBranding('#faf5ff', 'Helvetica, sans-serif');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm border-b p-4">
        <div className="flex justify-between items-center">
          <h1 className="text-xl font-semibold">Branded Email Builder</h1>
          <div className="space-x-3">
            <button 
              onClick={applyBlueTheme}
              className="px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
            >
              Blue Theme
            </button>
            <button 
              onClick={applyGreenTheme}
              className="px-3 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700"
            >
              Green Theme
            </button>
            <button 
              onClick={applyPurpleTheme}
              className="px-3 py-2 bg-purple-600 text-white text-sm rounded hover:bg-purple-700"
            >
              Purple Theme
            </button>
            <button 
              onClick={() => downloadHTML('branded-template.html')}
              className="px-3 py-2 bg-gray-600 text-white text-sm rounded hover:bg-gray-700"
            >
              Download
            </button>
          </div>
        </div>
      </div>
      
      <EmailTemplateBuilder />
    </div>
  );
}

Template Validation and Error Handling

Validate templates and handle errors gracefully.

import { EmailTemplateBuilder, useEmailTemplateBuilder, useEmailExport, useEmailTemplateManager } from 'mailyon';

function ValidationExample() {
  const { template } = useEmailTemplateBuilder();
  const { exportAsHTML, exportAsJSON } = useEmailExport();
  const { validateTemplate, loadTemplateFromJSON } = useEmailTemplateManager();

  const validateCurrentTemplate = () => {
    const validation = validateTemplate(template);
    
    if (validation.isValid) {
      alert('Template is valid! ✅');
    } else {
      alert(`Template has errors:\n${validation.errors.join('\n')}`);
    }
  };

  const exportWithValidation = () => {
    const validation = validateTemplate(template);
    
    if (!validation.isValid) {
      alert(`Cannot export template with errors:\n${validation.errors.join('\n')}`);
      return;
    }

    try {
      const html = exportAsHTML();
      const json = exportAsJSON();
      
      console.log('HTML Export:', html);
      console.log('JSON Export:', json);
      
      alert('Template exported successfully! Check console for output.');
    } catch (error) {
      alert(`Export failed: ${error.message}`);
    }
  };

  const loadTemplateFromString = () => {
    const templateJson = prompt('Paste your template JSON:');
    
    if (templateJson) {
      const success = loadTemplateFromJSON(templateJson);
      
      if (success) {
        alert('Template loaded successfully!');
      } else {
        alert('Failed to load template. Please check the JSON format.');
      }
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white shadow-sm border-b p-4">
        <div className="flex justify-between items-center">
          <h1 className="text-xl font-semibold">Template Validation</h1>
          <div className="space-x-3">
            <button 
              onClick={validateCurrentTemplate}
              className="px-3 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700"
            >
              Validate Template
            </button>
            <button 
              onClick={exportWithValidation}
              className="px-3 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700"
            >
              Export (with validation)
            </button>
            <button 
              onClick={loadTemplateFromString}
              className="px-3 py-2 bg-purple-600 text-white text-sm rounded hover:bg-purple-700"
            >
              Load from JSON
            </button>
          </div>
        </div>
      </div>
      
      <EmailTemplateBuilder />
    </div>
  );
}

Best Practices

Always validate templates before exporting
Use localStorage for simple template persistence
Handle errors gracefully with try-catch blocks
Provide user feedback for all actions
Use programmatic addition for consistent templates
Apply branding through template settings
Test exports before using in production

Available Features

✅ Drag & Drop - Visual component placement
✅ Export Functions - HTML, JSON, MJML export
✅ Template Management - Save/load from localStorage
✅ Programmatic Control - Add components via hooks
✅ Custom Styling - Apply branding and themes
✅ Validation - Template structure validation
✅ History Management - Undo/redo functionality
✅ Multi-format Export - Download as files

Next Steps

Hooks - Learn about available hooks
Components - Explore email components
Getting Started - Basic setup guide

📚 Documentation

Home - Quick start and overview
Getting Started - Installation and setup
Components - Available email components
Hooks - Custom React hooks
Examples - Code examples and use cases

🔗 Resources

🆘 Need Help?

Documentation Issues: Create an issue in the main repository
Feature Requests: Use the GitHub Issues page
Bug Reports: Include steps to reproduce and expected behavior

Built with ❤️ using React, TypeScript, and Tailwind CSS

Email Template Builder - Professional email templates without the generic header!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Examples

Real-World Examples

Basic Integration

Template Management with Local Storage

Programmatic Component Addition

Custom Styling and Branding

Template Validation and Error Handling

Best Practices

Available Features

Next Steps

📚 Documentation

🔗 Resources

🆘 Need Help?

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Email Template Builder

🚀 Getting Started

🧩 Components

🪝 Hooks

🔧 Integration

📤 Export

💡 Examples

📚 API Reference

Clone this wiki locally