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 with HTML and CSS, I sent it and was dumbfounded... The page looked weird due to compatibility issues.

After searching the internet for some information, I found that 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 killing me. There are also many other compatibility issues, you can refer to the following links for more details:
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 their 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 my development work on the try it alive page of 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 2 years, I continued to use the mjml solution to write various emails, probably 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 quietly paying attention to it, but I haven't started using it. How should I put it, the changes to the company's email pages are not 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, allowing for sending test emails and previewing the real effect 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.
• Due to compatibility issues, both mjml and react-email have CSS property inheritance that is not 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.