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!
Top comments (0)