Hexi

Email Compatibility Issues#

Since joining the company, I have been responsible for email development work. I remember when I wrote my first email, after reproducing the design draft using HTML and CSS, I sent it and was dumbfounded... The page looked strange and weird due to compatibility issues.

After searching online for some information, I found that the email clients do not support the latest HTML5 and CSS3. They don't even support flex layout, let alone grid layout. They only support basic table layout. For a frontend developer who heavily relies on flex layout, not being able to use flex is like asking me to die. There are also many other compatibility issues, which can be referred to at:
https://www.infoq.cn/article/fxglbktqax4uztloxzd3
https://www.caniemail.com/

mjml#

At that time (2021), the recommended solution online was to use mjml. Quoting from the official website: "MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices." In simple terms, mjml is a component library for email development, providing various components for use. You don't have to worry about compatibility issues, as it automatically adapts to different email clients.

After learning the usage of mjml components, I started development work on the try it alive page on the official website, and then copied the mjml code and the transpiled HTML code to the git repository for backup. This completes the development of an email.

react-email#

In the following two years, I continued to use the mjml solution to write various emails, totaling more than 40. The speed became faster and faster, but there were still some pain points in the process, such as lack of freedom, lack of engineering support, and lack of support for sending test emails.

About a year ago, react-email released version 1.0. At that time, some developers on Twitter recommended it. Its official introduction is: "A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript." You know, for frontend developers, it's simply irresistible. So I have been silently paying attention to it, but I have never used it. How should I put it, the changes to the company's email page have not been significant each time, so I just copy the existing mjml code and make some changes. It's my own laziness at work.

Last week, I finally started using it officially, and it did solve many pain points, such as:

• Integrated in a more systematic and engineering-oriented way, supporting component abstraction.

• The ability to export transpiled HTML code using the email export command. Combined with the Cloudflare Pages pipeline, it is convenient to preview emails online.

• Default integration with Resend, which allows sending test emails and previewing the actual effects during the development process.

  

• Support for Tailwind CSS, making responsive page development easier.

import { Button } from '@react-email/button';
import { Tailwind } from '@react-email/tailwind';

const Email = () => {
  return (
    <Tailwind
      config={{
        theme: {
          extend: {
            colors: {
              brand: '#007291',
            },
          },
        },
      }}
    >
      <Button
        href="https://example.com"
        className="bg-brand px-3 py-2 font-medium leading-4 text-white"
      >
        Click me
      </Button>
    </Tailwind>
  );
};

Some Thoughts#

There are still some pain points in email development, such as:

• How to achieve real-time preview support for multiple email clients (better development experience).
• Poor support for web fonts, making it difficult to reproduce the design effects.
• Due to compatibility issues, neither mjml nor react-email's CSS inheritance is intuitive (calling out 163 mailbox).
• The company's backend email sending integration is with Mailgun. Manual copying and pasting of email HTML code is still required. Is Resend a better choice?

Postscript: It took me a whole week from having the idea to writing this blog. I'm too lazy. I should be more diligent in the future.