React Email Preview

Learn how to use React Email's preview server for developing and testing email templates

React Email provides a powerful development server that allows you to preview, test, and iterate on your email templates in real-time.

This guide covers how to use the preview functionality effectively in the Dopamine Starter Kit.

Overview

The React Email preview server offers:

Live template preview with hot reloading
Multiple device viewports for responsive testing
HTML source inspection to debug rendering issues
Props testing with customizable data
Template collection organized by category
Export functionality for HTML output

Getting Started

Starting the Preview Server

Launch the React Email preview server from the API directory:

cd apps/api
npm run email:preview

This starts the preview server at http://localhost:3004 using the configuration:

{
  "scripts": {
    "email:preview": "email dev -d ./src/email/templates/previews --port 3004"
  }
}

Directory Structure

The preview system uses a specific directory structure:

apps/api/src/email/
├── templates/
│   ├── invitation.tsx        # Email template component
│   └── previews/
│       └── invitation.tsx    # Preview component with sample data

Creating Preview Components

Basic Preview Structure

Preview components provide sample data for your email templates:

// apps/api/src/email/templates/previews/invitation.tsx
import { InvitationEmail } from '../invitation';
 
export default function InvitationPreview() {
  return (
    <InvitationEmail
      name="John Doe"
      inviterName="Jane Smith"
      workspaceName="Acme Corporation"
      invitationUrl="http://localhost:3000/auth/login?token=sample-token"
    />
  );
}

Multiple Previews

Create multiple preview variations to test different scenarios:

// apps/api/src/email/templates/previews/invitation.tsx
import { InvitationEmail } from '../invitation';
 
export default function InvitationPreview() {
  return (
    <div>
      <h2>Default Invitation</h2>
      <InvitationEmail
        name="John Doe"
        inviterName="Jane Smith"
        workspaceName="Acme Corporation"
        invitationUrl="http://localhost:3000/auth/login"
      />
 
      <h2>Long Names</h2>
      <InvitationEmail
        name="Bartholomew Richardson-Wellington III"
        inviterName="Alexandrina Victoria Pemberton-Jones"
        workspaceName="The International Conglomerate of Advanced Technologies"
        invitationUrl="http://localhost:3000/auth/login"
      />
 
      <h2>Short Names</h2>
      <InvitationEmail
        name="Jo"
        inviterName="Al"
        workspaceName="Co"
        invitationUrl="http://localhost:3000/auth/login"
      />
    </div>
  );
}

Development Workflow

Template Development Process

Create Template: Build your React email component
Add Preview: Create preview component with sample data
Start Server: Launch the preview server
Iterate: Make changes and see them instantly
Test Responsive: Check different viewport sizes
Validate HTML: Inspect generated markup
Test Email Clients: Use HTML output for client testing

Testing Strategy

Cross-Client Compatibility

Use the preview server to prepare for email client testing:

// Test with different content lengths
export default function NewsletterPreview() {
  return (
    <>
      <NewsletterEmail
        subject="Short subject"
        content="Brief content for testing."
        unsubscribeUrl="#"
      />
 
      <NewsletterEmail
        subject="This is a very long email subject line that might wrap in some email clients"
        content={`
          This is a much longer email content that includes multiple paragraphs,
          special characters, and various formatting options to test how the
          template handles extensive content across different email clients.
 
          It includes line breaks, special characters like émojis 🎉, and
          different types of content that might cause rendering issues.
        `}
        unsubscribeUrl="https://example.com/unsubscribe"
      />
    </>
  );
}

Edge Case Testing

Test unusual but possible scenarios:

export default function EdgeCasePreview() {
  return (
    <>
      {/* Empty values */}
      <InvitationEmail
        name=""
        inviterName=""
        workspaceName=""
        invitationUrl="#"
      />
 
      {/* Special characters */}
      <InvitationEmail
        name="José García-Martínez"
        inviterName="李小明"
        workspaceName="Côte d'Azur Solutions & Co."
        invitationUrl="https://example.com/invite?token=abc123"
      />
 
      {/* Very long content */}
      <InvitationEmail
        name="User with an extraordinarily long name that exceeds normal expectations"
        inviterName="Another user with an incredibly lengthy name"
        workspaceName="A workspace with an exceptionally long name that might cause layout issues"
        invitationUrl="https://very-long-domain-name-for-testing.example.com/auth/login"
      />
    </>
  );
}

Conclusion

The React Email preview server is an essential tool for developing robust, well-tested email templates that work consistently across all email clients and devices.