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 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 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

Maizzle is a tool for creating e-mail templates based on Tailwind CSS. 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 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

Mailing is a new tool based on React components to create templates. Under the hood, it uses mjml-react. A package, that is porting mjml 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 components.

+1 point

Score: 4 points

react-email

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. **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!