Getting Started

🚀 Getting Started

Welcome to Mailyon! This guide will help you get up and running quickly with the email template builder.

📋 What You Need

Before you start, make sure you have:

• Node.js 16 or higher
• React project (version 16.8 or higher)
• npm or yarn package manager

📦 Installation

Step 1: Install Mailyon

npm install mailyon

Step 2: Install Required Dependencies

npm install react-dnd react-dnd-html5-backend

🎯 Quick Start

Basic Usage

import { EmailTemplateBuilder } from 'mailyon';

function MyApp() {
  return (
    <div style={{ height: '100vh' }}>
      <EmailTemplateBuilder />
    </div>
  );
}

That's it! You now have a fully functional email template builder.

🎨 How to Use the Builder

1. Add Components

• Drag components from the left panel to the center canvas
• 8 components available: Header, Text, Image, Button, Divider, Footer, Spacer, Social Media

2. Customize Components

• Click any component to select it
• Use the Inspector panel on the right to customize
• See changes instantly in the preview

3. Preview Your Email

• Use the tabs at the top: Editor, Desktop, Mobile
• Test responsiveness by switching between views
• Make adjustments as needed

4. Export Your Email

• Click the Export tab in the right panel
• Copy the code or download files
• Get HTML, MJML, or JSON formats

🧩 Component Library

Left Panel - Component Library

• Header - Add logo, company name, tagline
• Text - Write paragraphs and headings
• Image - Add photos and graphics
• Button - Create call-to-action buttons
• Divider - Add horizontal lines
• Footer - Add contact info and social links
• Spacer - Add vertical spacing
• Social Media - Add social platform icons

Center Panel - Builder Canvas

• Drag & Drop components here
• Real-time preview of your email
• Responsive design testing
• Component selection and editing

Right Panel - Inspector

• Template Settings - Global email settings
• Component Properties - Customize selected component
• Export Options - Get your email code

🎨 Customization Options

Template Settings

• Email Width - Set the overall width (default: 700px)
• Background Color - Choose email background color
• Font Family - Select font for your email

Component Properties

Each component has different customization options:

• Colors - Background, text, border colors
• Text Content - Edit text directly
• Sizing - Width, height, padding
• Alignment - Left, center, right
• Visibility - Show/hide elements

📱 Responsive Design

Desktop Preview

• Full-width view of your email
• Desktop email client appearance
• Perfect for most email clients

Mobile Preview

• Mobile-optimized view
• Responsive layout testing
• Mobile email client appearance

💾 Saving and Loading

Export Options

• JSON - Save your template structure
• MJML - Get MJML markup
• HTML - Get final HTML code

Template Management

• Save templates for reuse
• Load existing templates
• Share templates with your team

🚀 Advanced Usage

Using Hooks

import { useEmailTemplateBuilder, useEmailExport } from 'mailyon';

function MyApp() {
  const { template, addComponent } = useEmailTemplateBuilder();
  const { exportAsHTML } = useEmailExport();
  
  const handleSave = () => {
    const html = exportAsHTML();
    // Save or send your email
  };
  
  return <EmailTemplateBuilder />;
}

Custom Styling

<EmailTemplateBuilder 
  className="my-custom-class"
  style={{ height: '800px' }}
/>

🔧 Troubleshooting

Common Issues

Components not dragging?

• Make sure you have react-dnd and react-dnd-html5-backend installed
• Check that your React version is 16.8 or higher

Styling issues?

• The builder uses Tailwind CSS classes
• Make sure Tailwind is available in your project

Export not working?

• Check browser console for errors
• Make sure all components have valid properties

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

📚 Next Steps

1. Try the live demo at utdevnp.github.io/mailyon
2. Read the Components guide to learn about each component
3. Check out Examples for real-world use cases
4. Explore Hooks for advanced integration

🆘 Need Help?

• GitHub Issues - Report bugs or request features
• Documentation - Browse the wiki for detailed guides
• Live Demo - Try it out before integrating

Happy building! 🎉