Customize Emails
Learn how to customize email templates in your application
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.tsxEdit Email Template
Update an existing template:
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 emailNavigate 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 mainCommon 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
Related Documentation
- Email Integration - Email setup guide
- React Email - React Email documentation
How is this guide ?
Last updated on