React Email vs. TJML: A Framework Comparison

Email marketing is a crucial part of any business project. Today, there are countless tools available to quickly design the email template you need. For those who require greater flexibility in template development, frameworks come into play. They offer extensive functionality for clear and convenient customization of email templates, unlocking new possibilities for engaging with your audience.

In this article, we’ll explore React Email, a React-based framework for creating email templates. We’ll discuss its strengths and weaknesses and compare it to the TJML framework.

TJML is built on Vue, bringing all its advantages to the table. Previously, we compared TJML with MJML.

Installation and Setup

React email

To install React Email, you can add it to your TypeScript or JavaScript project via npm, or set it up manually by adding the necessary dependencies yourself. Once the setup is complete, you’ll have access to a local demo server with a collection of basic email templates. These templates can be opened and viewed directly in your browser:

Any changes you make to the templates in the emails folder will immediately appear in the browser. You can also send a test email to yourself using the dedicated button.

However, one significant drawback is the lack of a simple and accessible sandbox. If you’re unable to set up a project or connect React Email to it, you won’t be able to preview the resulting email.

TJML

To start working with TJML, you can visit the free sandbox, insert the components you need, and test what the final email will look like. The availability of a playground page allows you to edit your email template at any time and immediately see the results of your changes:

TJML can be installed by integrating the JS library, allowing you to work with templates in your usual development environment. The full instructions are available here.

For a better workflow with the framework, the following tools are available to users:

• VS Code Plugin. This extension offers autocomplete for TJML tags and provides hints for available attributes. The plugin can be downloaded here.
• Autocomplete for JetBrains products (WebStorm) using Web-Types. To enable hints for tags and available attributes, you can also connect the web-types.json.

Features

React Email

When the framework is installed, a folder with example templates becomes available. You can preview how these templates will appear to recipients on the demo server. Additionally, the code for these emails can be displayed there as well.

The code can be exported immediately in either HTML or plain-text format.

The framework’s website features a collection of ready-made blocks organized into categories. From there, you can quickly copy the block you need and paste it into your email code:

On the component pages, you can see how they are displayed on both desktop and mobile devices.

In React Email, to work with a specific component, you first need to import it before using it in your code. Once added, you can customize the content of the blocks, including text and images. The appearance of components is defined by passing an object with style properties and values to the component’s style attribute:

1
2
3
4
5
<Section style={{ display: "inline-block", width: "100%", maxWidth: 270, verticalAlign: "middle", }}>
            <Text style={{fontSize:"36px", color: "#ffffff", lineHeight: '1.2'}}>
              The best<br/>choice
            </Text>
</Section>

One major drawback of the service is the lack of clear documentation for the attributes and properties of components. As a result, users are left to explore component properties on their own, often making changes to the code "blindly."

TJML

As mentioned earlier, TJML features its own sandbox. This tool allows you to fully assemble a template from components and check how the email renders in different viewing modes:

TJML also offers the following features:

• Multiple viewing modes: dark theme, mobile and desktop views, and color inversion simulation for Gmail on iOS
• A Pixel-Perfect tool for precise, pixel-level layout adjustments
• Automatic monitoring of code size with alerts when it exceeds recommended limits
• AMP support for features like image galleries, interactive elements, and forms embedded directly into the email
• Simultaneous rendering of both HTML and AMP versions of the email
• Error validation for various issues

Coding in TJML follows the same structure as standard XML. Each component comes with a documented set of attributes. Inserted blocks can be customized to fit your needs, such as specifying button links, replacing images, and adding text.

After completing your email template, you can instantly preview the code and, if needed, compress it:

Email Display

One of the most important factors is the quality of the final layout, as it determines how the email appears across various email clients and viewing modes.

To compare the results of the frameworks, we’ll create two identical emails: one using TJML and the other with React Email. Let’s start with Gmail:

Here, the email renders correctly. Now, let’s see how it appears to iPhone users:

The framework performs well here. Finally, let’s check the rendering in a corporate client—Microsoft Outlook:

In Outlook, the email created with React Email appears highly unsatisfactory. This means the tool is not suitable for large-scale marketing campaigns targeting B2B audiences or professional use by agencies, as clients often check results in Outlook.

Comparing the emails, it’s clear that TJML outperforms React Email.

Summary

After thoroughly examining the React Email framework, we can conclude the following:

Pros:

• Offers test email sending directly from the demo server page.
• Features an attractive service design, with a clean and visually appealing interface.

Cons:

• Emails created with React Email suffer from display issues across various email clients, especially in Outlook.
• Lacks a sandbox environment.
• No AMP email support—a significant drawback for a modern email framework.
• No option to test email rendering in dark mode.

Conclusion

Frameworks can be a great choice for those who value flexibility in email design. At first glance, React Email seems like an interesting tool for developers. However, poor rendering in some clients, lack of AMP support, and limited flexibility make it unsuitable for professional use.
TJML, on the other hand, is a reliable tool that not only speeds up the template creation process but also ensures recipients see your emails exactly as intended. TJML stands out from its competitors with a set of unique features not found elsewhere. With TJML, you can be confident in the high quality of your emails.