Home

🎯 Mailyon - Professional Email Template Builder

Welcome to Mailyon - the comprehensive email template builder that lets you create stunning, professional emails with a simple drag-and-drop interface.

🚀 Get Started in Minutes

Installation

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

Basic Usage

import React from 'react';
import { EmailTemplateBuilder } from 'mailyon';

function MyApp() {
  return (
    <div className="app">
      <h1>My Email Builder</h1>
      <div style={{ height: '100vh' }}>
        <EmailTemplateBuilder />
      </div>
    </div>
  );
}

export default MyApp;

That's it! You now have a fully functional email builder integrated into your React app.

🎨 What You Can Build

• Marketing Emails - Promotional campaigns and announcements
• Newsletters - Regular updates and content sharing
• Welcome Series - Onboarding and introduction emails
• Transactional Emails - Order confirmations and receipts
• Corporate Communications - Internal and external messaging

🧩 8 Ready-to-Use Components

Component	What You Can Do
Header	Add logo, company name, tagline
Text	Write paragraphs, headings, content
Image	Add photos, graphics, banners
Button	Create call-to-action buttons
Divider	Add horizontal lines and separators
Footer	Add contact info and social links
Spacer	Add vertical spacing between sections
Social Media	Add social platform icons

✨ Key Features

• 🎯 Drag & Drop - Simply drag components to build your email
• 🎨 Real-time Preview - See changes instantly as you build
• 📱 Responsive Design - Works perfectly on desktop and mobile
• 🎨 Customizable - Change colors, text, sizes, and more
• 💾 Export Options - Get HTML, MJML, or JSON code
• 🔧 Easy Integration - Works with any React project
• 📦 Headerless Design - Seamlessly integrate into your app

🚀 How It Works

1. Drag components from the left panel to the center canvas
2. Click any component to customize it in the inspector
3. Preview your email in desktop and mobile views
4. Export your code when ready to use

📚 Documentation

• Getting Started - Installation and basic setup
• Components - Learn about each component and what you can customize
• Hooks - Advanced integration with custom hooks
• Examples - Real-world examples and use cases

🎯 Perfect For

• Marketing Teams creating email campaigns
• Designers building email templates
• Developers integrating email builders
• Content Creators sending newsletters
• Businesses of all sizes

🔗 Quick Links

• Live Demo - Try it out now
• GitHub Repository - View source code
• NPM Package - Install the package
• Issues & Support - Get help

💡 Why Choose Mailyon?

• No Generic Headers - Clean, professional interface
• Fully Customizable - Every component can be tailored to your needs
• Email Client Compatible - Works in all major email clients
• Developer Friendly - Easy to integrate and extend
• Production Ready - Built for real-world use

---

Ready to build professional emails without the complexity? 🚀

Start with the Getting Started guide or try the Live Demo right now!

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