TJML Framework: How to Create Emails Quickly and Easily in 2025

Over the past few decades, email has come a long way — from simple text messages to visually rich newsletters filled with graphics, animation, and interactivity. Yet as content became more diverse, so did the demands on email layout and coding.

To make email crafting comfortable and efficient under modern conditions, we developed a dedicated TJML framework. In this article, we’ll take a closer look at how it works and what makes it stand out when compared to other email coding methods.

Is Manual HTML Coding Still Relevant Today

Manual HTML coding was once the only way to achieve maximum control and precision in email design. However, the technologies evolved, which has also affected email clients; each of them has its own peculiarities and rendering rules.

Today, you need to keep numerous details in mind: how external styles behave, whether media queries work, and how tables and paddings are handled across different clients. Moreover, many people check their inboxes on smartphones, which means every email must also be adapted for vertical screens and mobile operating systems.

Basically, a single email has to be created in three different versions:

• for modern desktop and web clients;
  
  
• for mobile devices;
  
  
• for Outlook on Windows, where CSS support is still heavily limited.

AMP technology deserves a special mention. It has made interactive emails possible thanks to carousels, forms, and other dynamic components. But technically, this means that you must provide both an AMP version and a regular HTML version of the same message for those email clients that don’t support interactive components.

Where Visual Builders May Come In Handy

In modern marketing workflows, it’s impossible to rely solely on manual coding. One of the alternatives is email builders: modern, user-friendly tools for creating email campaigns. They require no coding skills and let you design professional templates in just a few minutes.

For example, the Pixcraft visual email builder allows you to assemble emails using a drag-and-drop interface: simply drag the desired elements onto the canvas and adjust them. Component management (including AMP) is available directly in the interface. The resulting templates are compatible with most email clients and easily adapt to mobile screens. One more option is the Pixcraft plugin for Figma, which can turn a finished design into a responsive HTML email.

Still, behind every message is a code that makes it work, and sometimes, editing it directly is inevitable. Can this process be just as convenient and modern? The answer is yes — with the help of TJML.

What Is TJML

TJML is an email framework developed by the Pixcraft team for building HTML and AMP emails. It combines the simplicity of a block-based approach with the flexibility of manual coding, all while preserving familiar syntax.

A basic TJML email structure may look like this:

1
2
3
4
5
6
7
<tjml>
  <m-body>
    <m-wrap width="600">
      <!-- email content -->
    </m-wrap>
  </m-body>
</tjml>

Here’s what each component does:

• <tjml> — the root container that wraps the entire code;
  
  
• <m-body> — the main body of the email containing all its content;
  
  
• <m-wrap> — a wrapper responsible for width, padding, background, alignment, and other layout parameters.

To build multi-column layouts, TJML provides two types of content composition that determine how blocks behave on mobile devices:

• Non-restructurable blocks. Here, elements remain in a single row. The <m-row> component wraps <m-column> elements, which scale on mobile.
  
  
• Restructurable blocks. These are <m-box> elements wrapped inside <m-boxes>. In mobile view, they automatically stack vertically if they no longer fit in one row.

These structures can be filled with content blocks such as text (<m-text>), images (<m-img>), buttons (<m-button>), and more. Please read the detailed documentation to learn more about all available components and attributes.

Here’s a simplified example of a TJML-based email:

1
2
3
4
5
6
7
8
9
10
<m-body bgcolor="#ffffff" font-family="Arial, sans-serif">
  <m-wrap width="600" padding="20px" bgcolor="#f9f9f9">
    <m-text font-size="20px" color="#333333" align="center">
      Hello! This email was created using TJML.
    </m-text>
    <m-button href="https://docs.pixcraft.io/en/tjml/" bgcolor="#6a66d3" color="#ffffff" border-radius="6px" width="200">
      Learn more
    </m-button>
  </m-wrap>
</m-body>

What Makes TJML Special

Code Editing Directly in the Browser

To start working with TJML, all that’s required is the online Playground editor. Here, you can code and preview your email in real time, toggle between desktop and mobile views, test dark mode, and inspect the generated HTML output.

TJML can also be used in any IDE of your choice. For extra comfort, we’ve also developed the following:

• a special VS Code plugin that enables autocomplete and tooltips for all components and attributes;
  
  
• web-types support for JetBrains products like WebStorm and PhpStorm.

HTML and AMP in a Single Code

In a traditional approach, AMP and HTML versions of an email are built separately as two distinct templates. TJML simplifies this process by generating both versions simultaneously within the same markup.

If you want to show a specific block in one version only, you can use conditional rendering:

<m-wrap m-if="isAmp"> <!-- AMP content --> </m-wrap>

<m-wrap m-if="!isAmp"> <!-- HTML content --> </m-wrap>

TJML automatically includes all required AMP components (such as amp-carousel, amp-form, or amp-list) whenever they are used in the code.

Rendering Across Email Clients

One of TJML’s main advantages is its smart approach to cross-client compatibility, including support for Outlook and Yandex Mail:

• The desktop Outlook email client uses a rendering engine that ignores modern CSS properties. TJML automatically inserts VML blocks and conditional comments to ensure correct display of backgrounds, alignment, and spacing (including in older versions).
  
  
• Yandex Mail, on the other hand, doesn’t support media queries. TJML structures the layout in a way that preserves responsiveness even without them.

To put it simply, TJML eliminates the tedious routine of cross-client adaptation. Compatibility and rendering issues are handled at the framework level.

Code Size Control and Optimization

In email marketing, message size is just as important as its content. For example, Gmail clips emails larger than 102 KB, which may break layouts or affect tracking pixels.

TJML monitors the code size and warns you if it exceeds recommended limits. You can also use built-in optimization to remove unnecessary spaces, line breaks, and unused styles. The result is a lightweight, stable message that displays correctly and won’t be clipped by email clients.

Error Checking and Typography

TJML continuously validates the email structure and nesting of m-elements. The framework alerts the user in case of any inconsistencies. In addition, it includes an automatic typograph, which inserts non-breaking spaces to prevent orphaned prepositions and conjunctions, ensuring the email looks clean not only technically but also visually.

Pixel-Perfect Layout

To avoid discrepancies between the design mockup and final layout, TJML includes a Pixel Perfect tool. Simply upload a version of your design in a graphic format (e.g., PNG or JPG) and align it with your TJML template using this tag:

<tjml pixel-perfect="img/mockup.png">

After that, you may specify the offset and blending mode to visually compare the mockup and the email layout.

Automating Email Creation with ChatGPT

To make the process of crafting TJML emails even easier, we came up with a special version of ChatGPT specifically for the framework. It can generate complete email layouts from a simple prompt: all you have to do is enter the description, and within seconds, you’ll receive a TJML code that can be customized to suit the requirements at hand.

Yet the functionality doesn’t end there. This ChatGPT version can also:

• edit existing code based on text instructions;
  
  
• explain how TJML works, including the purpose of each tag and which attributes to use in different scenarios.

Results and Efficiency

The framework has already proven itself in real-life production workflows and is ready for daily use.

For example, when TJML was implemented at a major Russian marketing agency, this showed a significant increase in productivity. Even for complex emails, coding speed improved by more than 50%, and for AMP emails, the speed improved by about 1.5× without any loss of quality.

Another key metric is code cleanliness and compactness. In benchmark tests, an uncompressed TJML email weighed only about 13.5 KB, compared to over 22 KB for an equivalent created using MJML. Smaller size means faster loading times and a lower risk of clipping in Gmail.

One more major advantage is TJML’s low entry barrier. The framework lets you focus on the structure and design rather than worrying about technical adaptation for a variety of email clients. Combined with its strong rendering stability, TJML stands out as a reliable and efficient solution for professional email production.

Conclusion

With TJML, the process of building email campaigns becomes fast, stable, and convenient. Quality control is ensured at every step, from the initial creative concept to the final delivery. For marketing professionals, this means less time spent on debugging and more time for content and creativity.