Email frameworks comparison in 2023
Tags: webdev, javascript, programming, react
Published: 2023-02-10 15:00:00

Email templates are what every app needs to have. Invite users, and send reminders or invoices. Brandable and elegant mailing increases your site’s credibility. **Some tools for a modern web application are Maizzle, Mailing, and react-email.**  I tried all and see what I pick at the end.

## Let’s start

[HappyReact.com](https://happyreact.com/) is my testing playground. I have a small number of e-mail templates. Under the hood, it’s a NextJS monorepo application with [Tailwind CSS](https://tailwindcss.com/) used for styling.
My criteria to choose the best tool is:

* Decoupling from the main app and live as a package

* Components editor with good DX

* Easy plug-into application

* Robust syntax

![Maizzle logo](https://cdn-images-1.medium.com/max/3400/1*CXqvFgBnPZ028gT-yOr3Fg.png)

## Maizzle

[Maizzle](https://maizzle.com/) is a tool for creating e-mail templates based on [Tailwind CSS](https://tailwindcss.com/). The approach of using tailwind got me in. 
>  I used Maizzle v3. The newest version is v4 so not everything can be relevant anymore

### Decoupling from the main app and live as a package

Maizzle has its own CLI so we can work on e-mail templates in separation.

*+1 point*

### Components editor with good DX

Maizzle creates a [Browsersync](https://browsersync.io/) local instance and serves our templates in HTML form. Development in that form is okayish.
*+0,5 point*

### Easy plug-into application

Using it with the application wasn’t easy. I needed to build them as handlebars templates so I can inject variables into templates. In the application, I needed to add a new webpack loader for a new type of file.
The whole time I have this feeling that I made it the wrong way but there wasn’t any right one I found.

*+0 point*

### Robust syntax

I’m already using Tailwind for styling so I’m familiar with it. Unfortunately, the syntax still needs many table, tr and td.

*+0 point*

**Score:** 1,5 points

![Mailing logo](https://cdn-images-1.medium.com/max/3400/1*bpsD3YUOnk_j0XxaNrfYTg.png)

## Mailing

[Mailing](https://www.mailing.run/) is a new tool based on [React](https://reactjs.org/) components to create templates. Under the hood, it uses [mjml-react](https://github.com/wix-incubator/mjml-react). A package, that is porting [mjml](https://mjml.io/) markup language into React component. Thanks to this, we can use render e-mail templates using React.

### Decoupling from the main app and live as a package

Mailing has its own CLI to build email templates and support sending e-mails as a separate module.

*+1 point*

### Components editor with good DX

Mailing comes with an excellent editor for previewing and developing templates. It has an option can send test e-mails from inside of it. Also, you can preview e-mails both on desktop and mobile.

*+1 point*

### Easy plug-into application

My application is built using React, so it wasn’t difficult to import and use a React component. Every tooling was set in place. Also, Mailing offers e-mail interception. You can see email without sending it —don’t worry you can still force to send it!

*+1 point*

### Robust syntax

Mailing uses mjml-react a package to make your own component. You can use React component syntax to configure [mjml.io](https://mjml.io/) components.

*+1 point*

**Score:** 4 points

![React-email logo](https://cdn-images-1.medium.com/max/3400/1*1tf51HFjSYbisSn22xZrGg.png)

## react-email

[React-email](https://react.email/) is making components primitives and encapsulating them in React components. This helps create email templates with syntax tested with all major email clients.

### Decoupling from the main app and live as a package

It’s living as a separate package. Also every component it’s a separate package. It can be cumbersome to add so many packages to your project. Also when you run the server it’s installing dependencies on its own which is not a great DX.

*+0.5 point*

### Components editor with good DX

React-email has its own component editor. **There is a lack of mobile view. Sending test templates is by [Resend](https://resend.com/).** Which is a SaaS solution from the creators of react-email.

*+0.5 point*

### Easy plug-into application

I couldn't manage to add it to my application. CLI didn’t work with my turborepo monorepo tool*

*+0 point*

\* This doesn’t mean that turborepo or react-email is bad. It means that I couldn't make it work. Maybe I didn’t do it properly or overlooked some important docs information.

### Robust syntax

Under the hood react-email uses React. **You can use components created by the react-email team. Also, you can use mjml-react or make your own React component**, and use standard “email tables” syntax.
*+1 point*

**Score:** 2 points

## The winner: Mailing

**I used Maizzle for some time and it wasn’t the best experience.** I made one small template and procrastinated every time I needed to make another one. Development was cumbersome and building templates using maizzle often makes my build fail. **I tried react-email and is not mature enough.** Had several problems with it:

* weird dependency installing

* cannot add it to my application

* components divided into packages aren’t the best DX.

I picked Mailing and I’m very happy about it. **Great editor with support for mobile and desktop views. It’s easy to integrate with the application. Even you can mock sending in your e2e tests. I highly recommend trying it!**