How We Simplified Email Templating with React Email.

Ehtesham Siddiqui -

At Everestek, we build, maintain, and support a lot of React-based applications for our clients. From enterprise applications to immersive web apps, React is our go-to tool, and we’ve gotten pretty good at it. We have started using TailwindCSS and TypeScript to keep things clean and organized, often inside Monorepos with Turborepo. Recently, one of our projects presented us with a challenge: email templates, and we tackled it head-on, discovering a scalable, maintainable solution we’d love to share with the world. What started as a simple task for our front-end team turned into a bit of a mess. Here’s how we tackled it, what we learned, and how React Email saved the day.

The Problem: Email Templates Were Getting Out of Hand

Our project needed email templates. The idea was straightforward: frontend developers would create them, upload them to Google Drive, and hand them over to the backend team to integrate. At first, we wrote these templates in plain HTML. For reusable bits like headers, footers, or buttons, we’d just copy-paste the code from one file to another. It worked fine when we had just a few templates.

But as the project grew, so did the number of emails. We were building templates for welcome emails, password resets, account updates, you name it. Copy-pasting code started to feel like a chore. Worse, it became hard to keep track of changes. If we updated a button style in one template, we’d have to manually update it everywhere else. Mistakes happened. Things got messy.

However, after testing and deploying our templates, we got feedback that the header needed to be centered. Sounds simple, right? But because we’d copied and pasted the header across 40 different HTML files, we had to manually edit every single one. It was tedious, error-prone, and a clear sign we needed a better way to manage this.

The Search for a Solution

We wanted something familiar, something that let us write reusable pieces of code like we already did in our React dashboard. We’re a team that loves components. In our dashboard, we don’t repeat ourselves; we build a button component once and use it everywhere. Why couldn’t we do that for emails?

One of our teammates suggested React Email. At first, it sounded odd: React for emails? Isn’t React for web apps? But the more we looked into it, the more it made sense. React Email lets you write email templates using React components, just like we were used to. Plus, it works with TailwindCSS, which we were already using. It felt like a perfect fit.

How We Made It Work

1. Set Up React Email in Our Monorepo
Since our project was already in a Turborepo, we added a new package for email templates. We installed React Email and set it up to use TypeScript (because we love type safety) and TailwindCSS (because it’s fast and familiar).

2. Built Reusable Components

We started small. For example, we made a Button component for emails:

function Button({ children }) ( 
  <a 
    href="#" 
    style={{ 
      padding: '10px 20px', 
      background: '#1e40af', 
      color: 'white', 
      textDecoration: 'none' 
    }}
  >
    {children} 
  </a>
);

 And a Header component (no more editing 40 files!):

function Header() {
  return (
    <div style={{ textAlign: 'center', fontSize: '24px', color: '#1e40af' }}>
      Everestek Technosoft
    </div>
  );
};

3. Wrote Templates with Components

Then, we built a full email template, like this welcome email:

import { Button } from './components/Button';
import { Header } from './components/Header';
import { Footer } from './components/Footer';

function WelcomeEmail({ name }) (
  <div>
    <Header />
    <h1>Welcome, {name}!</h1>
    <p>We're excited to have you on board.</p>
    <Button>Get Started</Button>
    <Footer />
  </div>
);

Suddenly, writing emails felt like working on our dashboard. We could reuse components and keep things consistent.

4. Used the Dev Server for Testing

React Email CLI comes with a dev server with hot module replacement (HMR). We could see our changes instantly, no more guessing how the email would look. Plus, it has tools to preview templates on mobile and big screens, so we can check responsiveness right away.

5. Created a Build Script

Once we were happy with the templates, React Email CLI compiled them into plain HTML by simply running `email export`. The output HTML was supported across a variety of email clients. We wrote a simple Node.js script to build all our templates into HTML files and zip them up. After running the script, we’d upload the zip to Google Drive for the backend team.

What We Learned

Switching to React Email wasn’t perfect right away. We hit a few bumps along the way, but the lessons stuck with us:

  • Start Small
    At first, we tried to rewrite all our old templates at once. That was overwhelming. Instead, we learned to start with one or two, get comfortable, and then scale up.
  • Keep Styling Simple
    Emails aren’t like web pages. Some email clients don’t support fancy Tailwind styles. We had to tweak our designs using inline styles instead of relying too much on Tailwind’s utilities to make sure they worked everywhere. Note: Avoid using Flex, as some email clients do not support Flex out of the box.
  • Test Early, Test Often
    We sent a few emails that looked great in our code but broke in Gmail. Now, we use the dev server to test changes live and check responsiveness on mobile and desktop before finalizing anything.

The Outcome

So, was it worth it? Absolutely. Here’s what we gained:

  • Less Work, More Consistency
    No more copy-pasting or editing 40 files for one small change. If we update the header component, it will update everywhere. Our emails look the same, and we spend less time fixing little mistakes.
  • Familiar Tools
    Using React and Tailwind for emails felt natural. Our front-end team didn’t have to learn something new; they just kept doing what they were good at.
  • Faster Testing
    The dev server with HMR and responsiveness tools lets us catch issues early. We could tweak a button or center a header and see it instantly across all screen sizes.
  • Happier Teams
    The backend team gets clean, working HTML files every time. No more chasing us down to fix broken templates. The handoff is smoother now.
  • Scalability
    As our project grows, adding new templates is easy. We just write a new component or tweak an existing one. It’s manageable again.

Takeaways for Anyone Else;

If your team is struggling with email templates, here’s what we’d suggest based on our experience:

  • If you’re already using React, give React Email a shot. It’s a game-changer for reusable code.
  • Don’t overcomplicate it; start with basic components and build from there.
  • Test your emails in real email clients before sending them to anyone important. The dev server makes this a breeze.

At Everestek, React Email turned a headache into something we enjoy working on. It’s not flashy, but it works, and that’s what matters.