Plainform

Learn how to customize email templates in your Plainform application.

Goal

By the end of this recipe, you'll have customized your email templates to match your brand.

Prerequisites

A working Plainform installation
Resend configured
Basic knowledge of React

Steps

Locate Email Templates

Email templates are in the emails/ directory. Plainform uses React Email for templates.

emails/
├── WelcomeEmail.tsx
├── ResetPasswordEmail.tsx
└── OrderConfirmationEmail.tsx

Edit Email Template

Update an existing template:

emails/WelcomeEmail.tsx

import * as React from 'react';
import { Html, Head, Body, Container, Text, Button } from '@react-email/components';

interface WelcomeEmailProps {
  firstName: string;
}

export function WelcomeEmail({ firstName }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: '#f6f9fc', fontFamily: 'Arial, sans-serif' }}>
        <Container style={{ padding: '20px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
            Welcome, {firstName}!
          </Text>
          <Text>Thanks for joining us.</Text>
          <Button
            href="https://yourdomain.com/dashboard"
            style={{ backgroundColor: '#5469d4', color: '#fff', padding: '12px 20px' }}
          >
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

React Email uses inline styles for maximum email client compatibility.

Preview Email Locally

Start the email preview server:

npm run email

Navigate to http://localhost:3000 to preview your emails.

Publish Your Changes

Commit and push:

git add emails/
git commit -m "style: customize email templates"
git push origin main

Common Email Components

React Email provides pre-built components:

<Button> - Call-to-action buttons
<Link> - Styled links
<Img> - Optimized images
<Hr> - Horizontal rules
<Section> - Layout sections

See React Email docs for all components.

Common Issues

Email Looks Different in Gmail

Use inline styles only
Avoid complex CSS (flexbox, grid)
Test with Litmus or Email on Acid

Images Not Loading

Use absolute URLs for images
Host images on your domain or CDN
Include alt text for accessibility

Next Steps

Change Colors - Customize color scheme
Add Font - Customize typography

Email Integration - Email setup guide
React Email - React Email documentation

Customize Emails