Email System

SonicJs provides a powerful email system built on Resend and React Email, allowing you to send beautiful, responsive emails with ease. The system includes a built-in email preview system and makes it simple to create and manage custom email templates.

Features

Email Templates

• Pre-built templates for common scenarios:
  • Welcome emails
  • One-time password (OTP) emails
  • Email confirmation
  • Password reset
• Customizable React-based templates
• Responsive design out of the box
• Live preview system

Email Management

• Centralized email template management
• Visual preview of all email templates
• Easy template customization
• Built-in email testing capabilities

Using the Email System

Viewing Email Templates

1. Navigate to the admin panel
2. Go to the "Emails" section
3. Browse the list of available email templates
4. Click any template to preview how it will look

Creating Custom Email Templates

To add your own email templates:

1. Create a new React component in the src/email folder
2. Design your email using React Email components
3. Add your template to the email registry in src/email/index.ts:

// Import your new email component
import { YourCustomEmail } from './your-custom-email';

// Add it to the emailComponents map
const emailComponents = {
    'otp': OTPEmail,
    'welcome': WelcomeEmail,
    'confirmation': ConfirmationEmail,
    'passwordReset': PasswordResetEmail,
    'yourCustomEmail': YourCustomEmail, // Add your new template
};

Best Practices

• Use React Email components for consistent styling
• Test emails across different email clients
• Keep templates responsive for mobile devices
• Use the preview system to verify your changes
• Follow email design best practices for deliverability

Technical Details

The email system uses:

• Resend for reliable email delivery
• React Email for template creation
• Built-in preview system for template testing

For detailed API documentation and implementation details, please refer to our Email API Documentation.