A modern, feature-rich Next.js application for composing and sending HTML emails with an intuitive user interface and powerful mailing list management. All configurations are stored securely in your browser, with no server setup required.
⚠️ Security Note: This application is designed for local use or deployment in controlled environments. Public deployment is not recommended due to the sensitive nature of email sending capabilities.
Features | Getting Started | Documentation | Contributing
- 📝 Visual Email Builder with drag-and-drop interface powered by GrapeJS
- 📊 Contact Management with import/export capabilities
- 💾 Template System for reusable email designs
- 🎨 Modern UI/UX with responsive design
- 🔧 Multi-Account Support for different SMTP configurations
- Visual Email Builder
- Drag-and-drop interface for easy email design
- Real-time preview of email content
- Pre-built components
- Responsive email templates
- No coding required
- Comprehensive Contact Management
- Create and edit recipient lists
- Import/export functionality (CSV)
- Personalize emails with contact fields
-
Clone the repository
git clone https://github.com/Will6855/html-email-sender.git cd html-email-sender -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- Save Templates
- Create templates using the drag-and-drop builder
- Save and reuse email designs
- Use variables in templates for personalization
- Preview templates before use
- Export templates for backup
- Address Book
- Add and organize contacts with custom fields
- Create contact groups for easier sending
- Import contacts from CSV files
- Export your contact list for backup
- Use contact fields in email templates
- Filter contacts using multiple conditions:
- Contains, Equals, Starts with, Ends with
- Greater than, Less than (for numeric values)
- Combine multiple filters for advanced searching
-
Email Service Setup
- Navigate to Account Settings
- Click "Add New Account"
- Enter your SMTP details:
- Name (e.g., "John Doe")
- Email (your email address)
- Password (your email password or app-specific password)
- SMTP Server (e.g., smtp.gmail.com)
- Port (usually 587 for TLS)
-
Common SMTP Settings
Service Server Port Security Gmail smtp.gmail.com 587 TLS Outlook smtp.office365.com 587 TLS Yahoo Mail smtp.mail.yahoo.com 587 TLS Amazon SES (Custom URL) 587 TLS
- Use app-specific passwords for Gmail and other services
- Enable 2FA on your email accounts
- Keep your templates and contact lists backed up
-
SMTP Connection Failed
- Verify your SMTP credentials
- Check if your email provider requires an app-specific password
- Ensure your email service allows SMTP access
-
Template Rendering Issues
- Clear browser cache
- Check HTML syntax
- Verify CSS compatibility
- Try rebuilding the template using the drag-and-drop editor
- Export and reimport the template
-
Import/Export Problems
- Ensure CSV files are properly formatted
- Check file encoding (UTF-8 recommended)
- Verify required columns are present
-
Email Builder Issues
- Clear browser cache and reload
- Check if all components are loading properly
- Verify image URLs are accessible
- Try using a different browser
- Check console for any JavaScript errors
| Issue | Description | Impact |
|---|---|---|
| Webp Transparency | Webp transparency is not supported | 🚫 Template Rendering Limitation |
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions, please:
- Check the Issues page
- Create a new issue if your problem isn't already listed
- Provide as much detail as possible about your setup and the issue
- Include screenshots if the issue is related to the email builder
- Next.js - The React Framework
- GrapeJS - Web Builder Framework
- Nodemailer - Email sending functionality
- Tailwind CSS - Styling framework