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 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:
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:
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:
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:
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 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: "[email protected]",
to: "[email protected]",
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!
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:
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!
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!
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build a React Native Turbo Module for Android to access device info like model, IP, uptime, and battery status using native mobile APIs.
Learn how to measure round-trip time (RTT) using cURL, a helpful tool used to transfer data from or to a server.
React.memo prevents unnecessary re-renders and improves performance in React applications. Discover when to use it, when to avoid it, and how it compares to useMemo and useCallback.
Learn how React’s useCallback hook boosts performance by memoizing functions and preventing unnecessary re-renders with practical examples and best practices.
Learn more →
