A guide to the best email editing tools

Written by Isaac Okoro✏️

Email editors can be regarded as advanced WYSIWYG (what you see is what you get) tools, which allow users to create email templates without possessing coding skills. These editors are used to build responsive emails that utilize HTML and CSS to respond to various device widths.

In this article, we will focus on the most effective email editing tools available as well as their unique features with a focus on open-source and largely free options. Then we’ll integrate one of these editors, Unlayer, and use MailDev to test.

Unlayer

Unlayer is an open-source drag-and-drop email editor that allows users to create emails with minimal effort. When used with the React framework, it serves as a wrapper component that provides a developer-friendly visual email builder for web applications.

It can be easily integrated into React, Vue, and Angular projects. Below are some key features:

• Drag-and-drop editor
• Ready-made responsive templates
• HTML and JSON export options
• Ability to add custom tools for specialized use cases

Easy email

Another open-source and free-to-use email editor is Easy email which was developed based on MJML, a markup language for creating responsive emails.

It offers a user-friendly interface with a range of features that provide users with a drag-and-drop email editor similar to the the likes of Unlayer.

Easy email integrates with React as a wrapper to provide its intuitive editor rendition. Below are its key features:

• Drag-and-drop editor
• Built-in templates
• Responsive design support

MJML

MJML is a markup language that creates responsive email templates. It is intuitive in the sense that its markup is rendered into responsive HTML for any device and email client.

Key features:

• Simplified email development with MJML syntax
• Converts MJML into responsive HTML
• Extensive component library for common email structures

GrapesJS

GrapesJS is a free email marketing tool to build responsive and professional emails. It offers a component-based interface that enables building blocks in email templates.

Below are some key features of GrapesJS:

• Modular components for building emails
• Responsive design by default
• Extensible with plugins and additional features

Integrating email editors with frontend web frameworks

A major benefit of modern email editors is that they can work with popular frontend web frameworks. Such integrations allow non-technical users to craft responsive and customized emails within a web application.

In this section, we'll explore how to integrate Unlayer into a React application.

Let’s start by running the command below to create and navigate to a new React application:

npx create-react-app email-editor && cd email-editor 

Next, install the react-email-editor package into the newly created react application:

npm install react-email-editor

After installing, update your app.js, and update the App.css with the code block below:

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
}

Next, update the App.js file with the code below:

import axios from "axios";
import React, { useRef } from "react";
import EmailEditor from "react-email-editor";
import "./App.css";

const App = () => {
  const emailEditorRef = useRef(null);
  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { html } = data;
      sendTestEmail(html);
    });
  };

  const sendTestEmail = async (html) => {
    try {
      const response = await axios.post("http://localhost:8080/send-email", {
        html,
      });
      alert(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return (
    <div className="App">
      <h1>React Email Editor</h1>
      <EmailEditor ref={emailEditorRef} />
      <button className="button" onClick={exportHtml}>
        Send Email
      </button>
    </div>
  );
};

export default App;

In the code block above, the component uses useRef to reference the email editor (emailEditorRef), which exports the designed email content. When the Send Email button is clicked, the exportHtml function is triggered, which extracts the HTML element to the sendTestEmail function, and that then sends a post request to the backend localhost API.

MailDev for email testing

MailDev is an open-source SMTP (Simple Mail Transfer Protocol) server for testing project-generated emails during the development phase that runs locally on a user’s machine.

It provides a web interface and local server for sending and receiving test emails from the backend without sending anything to real email addresses.

The MailDev application uses a backend server for integration with the SMTP settings of your application. In short, MailDev is a simulated SMTP server that works like intermediate storage for the emails sent from your app during development.

Let’s run a test email generated in the previous section using the MailDev server. First, we will try to create our backend server using Node.js. Open the terminal in your preferred directory, and execute the command below to create a Node project structure:

mkdir my-node-backend && cd my-node-backend && npm init -y

The command above will create a folder with Node modules downloaded into it. The next step is to install Express.js and Nodemailer, which we will do by running the command below:

npm install express nodemailer cors

Next, create a server.js file in the project directory, and paste the code below into it:

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
const app = express();

app.use(express.json());
app.use(cors());

//Set up Nodemailer to connect to Maildev's SMTP server
const transporter = nodemailer.createTransport({
  host: "127.0.0.1",
  port: 1025, // Maildev's default SMTP port
  secure: false, // Maildev does not require SSL
  tls: {
    rejectUnauthorized: false,
  },
});

// API endpoint to send the email
app.post("/send-email", (req, res) => {
  const { html } = req.body;
  const mailOptions = {
    from: "IsaaacTheTester@example.com",
    to: "recipient@example.com",
    subject: "Test Email from React Email Editor",
    html: html,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error("Error sending email:", error);
      return res.status(500).send("Failed to send email");
    }
    console.log("Email sent:", info.response);
    res.status(200).send("Email sent successfully");
  });
});

app.listen(8080, () => {
  console.log("Server is running on port 8080");
});

In the code block above, we’re setting up a Node server using Express that uses Nodemailer to send emails thorough MailDev’s SMTP server. The server listens on port 8080 and accepts POST requests to the /send-email endpoint.

Next, run the command below in the terminal to start the node server:

node server.js

Finally, run the command below to install MailDev globally on your machine:

npm install -g maildev

With MailDev successfully downloaded and installed, run the command below to spin it up:

maildev

With all configurations complete, let’s start our frontend servers and create some cool email templates. Run the command below in the frontend’s terminal to start the React project:

npm start

Now head over to http://localhost:3000/ to preview our email editor:

With our email template readily designed, let’s proceed to send it and see what it looks like on a test mail using MailDev.

Design your email template to your preference, send the email by clicking the button, and head over to http://127.0.0.1:1080/#/ to preview the email:

It should look pretty nifty! You did it!

Key features to look for in email editors

I listed my preferred email editors above, but these are general qualities I look out for when deciding on whether an email editor is worth pursuing:

• Responsive templates — automatically adapts emails for mobile and desktop views
• Drag-and-drop design — simplifies the creation of email content without coding
• Customization options — injects custom HTML/CSS code
• Pre-built elements — embeds modules such as buttons and social media if desired
• Compatibility with frameworks — integrates with chosen web framework whether it’s React, Angular, etc.
• Responsiveness across platforms — is responsive across all platforms and devices ranging from mobile to tablet, and browsers

Conclusion

Of all the email editors, the flexibility of easily embedding Unlayer makes it my preferred choice since it enables responsive email templates. I also believe MailDev does a good job in ensuring that emails have no mistakes and appear intact.

Let me know if you have any preferred email editors and other tools I might have missed. Until then, happy coding!

---

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free.

The above is the detailed content of A guide to the best email editing tools. For more information, please follow other related articles on the PHP Chinese website!