mailing

Build, test, send emails with React

3,604

View on GitHub View on NPM

Top Related Projects

react-email

13,919

💌 Build and send emails using React

mjml

17,026

MJML: the only framework that makes responsive-email easy

responsive-html-email-template

13,284

A free simple responsive HTML email template

email-blueprints

6,985

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

Cerberus

4,999

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

postmark-templates

3,080

Rock-solid transactional email templates for applications.

Quick Overview

Mailing is an open-source email marketing platform designed for developers. It provides a simple and efficient way to create, send, and manage email campaigns programmatically. Mailing aims to offer a developer-friendly alternative to traditional email marketing services.

Pros

Fully open-source and self-hostable, giving developers complete control over their email marketing infrastructure
Integrates seamlessly with existing development workflows and tools
Provides a simple API for creating and managing email campaigns programmatically
Supports dynamic content and personalization in emails

Cons

Requires technical knowledge to set up and maintain
May lack some advanced features found in established commercial email marketing platforms
Documentation could be more comprehensive for certain advanced use cases
Limited community support compared to larger, more established email marketing solutions

Code Examples

Creating a new email campaign:

const { Mailing } = require('mailing');

const campaign = new Mailing.Campaign({
  name: 'Welcome Series',
  subject: 'Welcome to Our Service!',
  from: 'noreply@example.com',
  content: '<h1>Welcome!</h1><p>Thanks for joining us.</p>'
});

campaign.save();

Sending an email to a specific recipient:

const { Mailing } = require('mailing');

const email = new Mailing.Email({
  to: 'user@example.com',
  subject: 'Your Account Update',
  content: '<p>Your account has been successfully updated.</p>'
});

email.send();

Adding a subscriber to a mailing list:

const { Mailing } = require('mailing');

const list = await Mailing.List.findByName('Newsletter Subscribers');
await list.addSubscriber({
  email: 'newuser@example.com',
  firstName: 'John',
  lastName: 'Doe'
});

Getting Started

To get started with Mailing, follow these steps:

Install Mailing via npm:
```
npm install mailing
```

Set up your configuration:

const { Mailing } = require('mailing');

Mailing.configure({
  apiKey: 'your-api-key',
  domain: 'your-sending-domain.com'
});

Create and send your first email:

const email = new Mailing.Email({
  to: 'recipient@example.com',
  subject: 'Hello from Mailing!',
  content: '<h1>Welcome</h1><p>This is your first email sent with Mailing.</p>'
});

email.send();

For more detailed information and advanced usage, refer to the official Mailing documentation.

Competitor Comparisons

react-email

13,919

💌 Build and send emails using React

Pros of react-email

More comprehensive documentation and examples
Larger community and ecosystem with more contributors
Built-in integration with popular email service providers

Cons of react-email

Steeper learning curve for developers new to React
Limited flexibility for non-React projects
Potentially heavier bundle size due to React dependency

Code Comparison

react-email:

import { Html } from '@react-email/html';
import { Text } from '@react-email/text';

export default function Email() {
  return (
    <Html>
      <Text>Hello World</Text>
    </Html>
  );
}

mailing:

<mj-section>
  <mj-column>
    <mj-text>Hello World</mj-text>
  </mj-column>
</mj-section>

Both libraries aim to simplify email template creation, but they take different approaches. react-email leverages React components, making it familiar for React developers but potentially more complex for others. mailing uses a custom XML-like syntax based on MJML, which may be easier for non-React developers to adopt.

react-email offers a more extensive set of pre-built components and integrations, while mailing focuses on simplicity and ease of use. The choice between the two depends on the project's requirements, the development team's expertise, and the desired level of customization and integration with other tools.

mjml

17,026

MJML: the only framework that makes responsive-email easy

Pros of mjml

Mature and widely adopted framework with a large community
Extensive documentation and learning resources available
Supports a wide range of email clients and devices

Cons of mjml

Steeper learning curve due to custom syntax and components
Less flexibility for complex, dynamic email content
Requires compilation step to generate final HTML

Code Comparison

mjml:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

mailing:

export default function Email() {
  return (
    <Html>
      <Body>
        <Container>
          <Text>Hello World</Text>
        </Container>
      </Body>
    </Html>
  );
}

mailing offers a more React-like syntax, making it easier for developers familiar with React to create email templates. It also provides better integration with modern JavaScript ecosystems and tooling.

mjml, on the other hand, uses a custom XML-like syntax that may require more time to learn but offers robust email client compatibility out of the box.

Both frameworks aim to simplify email development, but they cater to different developer preferences and project requirements.

responsive-html-email-template

13,284

A free simple responsive HTML email template

Pros of responsive-html-email-template

Simple and lightweight, focusing solely on providing a responsive email template
Easy to understand and modify for developers with basic HTML/CSS knowledge
Well-documented with inline comments explaining each section of the template

Cons of responsive-html-email-template

Limited to a single template design, requiring more effort for customization
Lacks built-in tools for email sending or integration with backend systems
No automated testing or preview functionality for different email clients

Code Comparison

responsive-html-email-template:

<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
  <tr>
    <td>&nbsp;</td>
    <td class="container">
      <div class="content">
        <!-- START CENTERED WHITE CONTAINER -->
        <table role="presentation" class="main">

mailing:

export default function Email() {
  return (
    <Html>
      <Head />
      <Preview>Log in to your account</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section style={box}>

The code snippets show the different approaches: responsive-html-email-template uses traditional HTML tables for layout, while mailing employs a React-like JSX syntax for composing email templates.

email-blueprints

6,985

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

Pros of email-blueprints

Comprehensive collection of email templates for various purposes
Well-established and maintained by a leading email marketing platform
Includes responsive designs for better cross-device compatibility

Cons of email-blueprints

Limited to static HTML templates, requiring manual integration
Lacks built-in testing and preview functionality
May require more technical knowledge to customize and implement

Code Comparison

email-blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 10px 0 30px 0;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border: 1px solid #cccccc; border-collapse: collapse;">
        <!-- Email content here -->
      </table>
    </td>
  </tr>
</table>

mailing:

import { Html } from '@react-email/html';
import { Button } from '@react-email/button';

export default function Email() {
  return (
    <Html>
      <Button href="https://example.com">Click me</Button>
    </Html>
  );
}

The mailing repository offers a more modern, component-based approach using React, while email-blueprints provides traditional HTML templates. mailing includes features like live preview and testing, making it easier for developers to create and iterate on email designs. However, email-blueprints offers a wider range of pre-designed templates that may be quicker to implement for those familiar with HTML email development.

Cerberus

4,999

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

Pros of Cerberus

Focused on creating responsive HTML email templates
Extensive documentation and examples for email design
Lightweight and easy to integrate into existing email workflows

Cons of Cerberus

Limited to email template creation, not a full-featured mailing solution
Requires manual integration with email sending services
Less suitable for complex, dynamic email content generation

Code Comparison

Cerberus (HTML email template):

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td style="padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
      <h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">Heading 1</h1>
      <p style="margin: 0;">This is a sample email template.</p>
    </td>
  </tr>
</table>

Mailing (React component):

import { Html } from '@react-email/html';
import { Text } from '@react-email/text';

export default function Email() {
  return (
    <Html>
      <Text>This is a sample email component.</Text>
    </Html>
  );
}

postmark-templates

3,080

Rock-solid transactional email templates for applications.

Pros of postmark-templates

Extensive collection of pre-designed email templates
Responsive design for various email clients and devices
Well-documented and easy to customize

Cons of postmark-templates

Limited to email templates only, not a full mailing solution
Requires integration with a separate email sending service
Less flexibility for complex, dynamic email content

Code Comparison

postmark-templates:

<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td class="email-body" width="100%" cellpadding="0" cellspacing="0">
      <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
        <!-- Email content here -->
      </table>
    </td>
  </tr>
</table>

mailing:

export default function Email() {
  return (
    <Html>
      <Body>
        <Container>
          {/* Email content here */}
        </Container>
      </Body>
    </Html>
  );
}

Summary

postmark-templates offers a wide range of ready-to-use email templates with responsive design, making it ideal for quick implementation of standard email layouts. However, it lacks the full mailing functionality and flexibility provided by mailing.

mailing, on the other hand, offers a more comprehensive solution for creating and sending emails, with greater customization options and integration with React components. It may require more setup but provides more control over the entire email creation and sending process.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

â Build, test, send emails with React

Build email templates with React components Examples
MJML components that work across clients (Outlook!)
Preview server with live reload for quick development
Dev mode opens emails in your browser instead of sending
Test mode for ensuring emails send and have the correct content
Plays well with js frameworks like next.js, redwood.js, remix
Written in TypeScript, inspired by Action Mailer from Ruby on Rails

â Why?

Weâre longtime users of Action Mailer and wanted something similar for our typescript/react apps. We didnât find anything, so we decided to build Mailing. We added some features that we wouldâve liked in Action Mailer, like a mobile toggle (with hotkeys), and the ability to send a test email from the browser while developing. We went all in on MJML so that we (almost) never have to think about email clients or nested tables :)

â Get started

Prerequisites: Mailing requires version 16+ of node and running on Mac or Linux. Windows is not supported at this time, but we'd welcome a pull request to fix these bugs and add Windows support!

To get started with Mailing, check out the official docs.

â Contributing

Want to improve Mailing? Incredible. Try it out, file an issue or open a PR.

Check the CONTRIBUTING.md for more info.

â Support

Need help getting set up? Hit us up on discord

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of react-email

Cons of react-email

Code Comparison

Pros of mjml

Cons of mjml

Code Comparison

Pros of responsive-html-email-template

Cons of responsive-html-email-template

Code Comparison

Pros of email-blueprints

Cons of email-blueprints

Code Comparison

Pros of Cerberus

Cons of Cerberus

Code Comparison

Pros of postmark-templates

Cons of postmark-templates

Code Comparison

Summary

Convert designs to code with AI

README

â Build, test, send emails with React

â Why?

â Get started

â Contributing

â Support

Top Related Projects

Convert designs to code with AI

â Build, test, send emails with React

â Why?

â Get started

â Contributing

â Support