Skip to main content

​
Using Templates - Preview, Render & Code Editor

Once you have templates in your library, Senderr provides powerful tools to preview, customize, and use your templates effectively. This guide covers the template preview system, rendering options, and the integrated code editor.

​
Template Preview System

​
Accessing Template Previews

  1. From Your Library
  2. From Template Marketplace
    • Browse Templates
    • Click on any template to preview before adding to library
    • Preview shows template with sample data

​
Preview Features

​
Visual Preview

  • Desktop/Mobile Views: Toggle between desktop and mobile email previews
  • Dark/Light Mode: See how your template looks in different email clients
  • Real-time Updates: Preview updates instantly as you modify variables
  • Multiple Email Clients: Preview rendering across different clients

​
Variable Testing

  • Interactive Forms: Modify template variables in real-time
  • Sample Data: Pre-filled with realistic sample data
  • Type Validation: Ensures variables match expected types
  • Required Fields: Highlights missing required variables

Preview Example

When previewing a welcome email template, you can:
  • Change the recipient name and see it update instantly
  • Modify company name, colors, and messaging
  • Test different subject lines and preview text
  • See how the template handles missing optional variables

​
Template Rendering

​
How Templates Are Rendered

Senderr uses React Email to render templates into HTML that’s compatible with email clients:
  1. React Components: Templates are built as React Email components
  2. Variable Injection: Your data is injected into template variables
  3. HTML Generation: React Email converts to optimized HTML
  4. Client Optimization: Output is optimized for email client compatibility

​
Rendering Options

​
Format Options

  • HTML: Standard email format for sending
  • Text: Plain text fallback version
  • React: Raw React component (for developers)

​
Rendering Settings

  • Pretty Output: Formatted HTML for readability
  • Minified: Compressed HTML for smaller size
  • Inline CSS: All styles inlined for better email client support

​
Using the Render API

// Render a template with variables
const response = await fetch('/api/v1/templates/{id}/render', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': 'your-api-key'
  },
  body: JSON.stringify({
    variables: {
      name: 'John Doe',
      company: 'Acme Corp',
      confirmationUrl: 'https://example.com/confirm'
    },
    format: 'html',
    pretty: true
  })
});

const result = await response.json();
console.log(result.html); // Rendered HTML output

​
Code Editor

​
Accessing the Code Editor

  1. From Template Details
    • Open any template in your library
    • Click “Edit Code” or “View Source”
    • Opens the integrated code editor
  2. Creating New Templates

​
Editor Features

​
Syntax Highlighting

  • React/JSX Support: Full syntax highlighting for React Email components
  • Error Detection: Real-time error highlighting and validation
  • Auto-completion: IntelliSense for React Email components
  • Import Suggestions: Auto-suggests available React Email imports

​
Live Preview

  • Split View: Code editor on left, live preview on right
  • Instant Updates: Preview updates as you type
  • Variable Testing: Test different variable values in preview pane
  • Responsive Preview: Toggle desktop/mobile preview modes

​
Code Validation

  • React Email Validation: Ensures code uses valid React Email patterns
  • Security Scanning: Prevents malicious code injection
  • Best Practices: Suggests improvements for email compatibility
  • Performance Warnings: Alerts for potentially slow rendering code

​
Template Structure

​
Basic Template Format

import {
  Html,
  Body,
  Container,
  Text,
  Button,
  Img
} from '@react-email/components';

export default function WelcomeEmail({
  name = 'there',
  company = 'Company',
  confirmUrl = '#'
}) {
  return (
    <Html>
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Container>
          <Text>Hello {name}!</Text>
          <Text>Welcome to {company}.</Text>
          <Button href={confirmUrl}>
            Confirm Email
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

​
Variable Schema

Define your template variables for better API integration: 
// Variable schema (optional but recommended)
export const schema = {
  name: {
    type: 'string',
    required: true,
    description: 'Recipient name'
  },
  company: {
    type: 'string',
    required: false,
    default: 'Company',
    description: 'Company name'
  },
  confirmUrl: {
    type: 'string',
    required: true,
    description: 'Email confirmation URL'
  }
};

​
Editing Best Practices

​
Component Usage

  • Use React Email Components: Stick to the official component library
  • Inline Styles: Use inline styles for better email client support
  • Semantic HTML: Use proper HTML structure for accessibility
  • Responsive Design: Design for both desktop and mobile

​
Variable Handling

  • Default Values: Always provide default values for variables
  • Type Checking: Validate variable types in your components
  • Graceful Fallbacks: Handle missing or invalid variables gracefully
  • Documentation: Comment your variables for other developers

​
Performance

  • Optimize Images: Use optimized images with proper alt text
  • Minimal JavaScript: Avoid JavaScript (not supported in email)
  • CSS Limitations: Understand email client CSS limitations
  • File Size: Keep templates reasonably sized for better delivery

​
Saving and Publishing

​
Save Drafts

  • Auto-save: Code is automatically saved as you type
  • Version History: Previous versions are kept for recovery
  • Draft Mode: Save work-in-progress without publishing

​
Publishing Templates

  1. Validation Check: Ensure template passes all validation
  2. Preview Test: Test with various variable combinations
  3. Publish: Make template available in your library
  4. API Access: Published templates become available via API

​
Collaboration Features

​
Template Sharing

  • Share Links: Generate shareable preview links
  • Export Code: Download template source code
  • Copy to New: Create new templates from existing ones
  • Template Gallery: Browse community templates for inspiration

​
Version Control

  • Change History: See all changes made to a template
  • Restore Previous: Restore earlier versions if needed
  • Compare Versions: See differences between versions
  • Branch Templates: Create variations of existing templates

​
Template Variables

​
Variable Types

​
Supported Types

  • String: Text content (names, messages, URLs)
  • Number: Numeric values (prices, quantities, counts)
  • Boolean: True/false values (show/hide sections)
  • Array: Lists of items (product lists, feature lists)
  • Object: Complex data structures (user profiles, orders)

​
Variable Examples

// String variables
<Text>Hello {name}!</Text>

// Number variables
<Text>Total: ${price.toFixed(2)}</Text>

// Boolean variables
{showFooter && <Footer />}

// Array variables
{products.map(product => (
  <ProductCard key={product.id} {...product} />
))}

// Object variables
<Text>Welcome {user.firstName} {user.lastName}</Text>

​
Dynamic Content

​
Conditional Rendering

// Show different content based on user type
{userType === 'premium' ? (
  <PremiumWelcome />
) : (
  <StandardWelcome />
)}

// Show sections conditionally
{orderItems.length > 0 && (
  <OrderSummary items={orderItems} />
)}

​
Content Personalization

// Personalized greetings
const greeting = hour < 12 ? 'Good morning' :
                 hour < 18 ? 'Good afternoon' :
                 'Good evening';

<Text>{greeting}, {firstName}!</Text>

​
Advanced Features

​
Custom Components

Create reusable components within your templates: 
// Custom component for consistent styling
function StyledButton({ href, children }) {
  return (
    <Button
      href={href}
      style={{
        backgroundColor: '#007bff',
        color: 'white',
        padding: '12px 24px',
        borderRadius: '6px'
      }}
    >
      {children}
    </Button>
  );
}

// Use in template
<StyledButton href={confirmUrl}>
  Confirm Email
</StyledButton>

​
Template Inheritance

Build template systems with shared components: 
// Base layout component
function EmailLayout({ children, headerLogo, footerText }) {
  return (
    <Html>
      <Body>
        <Container>
          <Img src={headerLogo} alt="Logo" />
          {children}
          <Text style={{ fontSize: '12px', color: '#666' }}>
            {footerText}
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

// Specific email templates
export default function WelcomeEmail(props) {
  return (
    <EmailLayout {...props}>
      <Text>Welcome to our platform!</Text>
    </EmailLayout>
  );
}

​
Testing Templates

​
Preview Testing

  1. Variable Combinations: Test different variable values
  2. Edge Cases: Test with missing or invalid data
  3. Long Content: Test with longer text content
  4. Email Clients: Preview in different email clients

​
Send Testing

  1. Test Emails: Send test emails to yourself
  2. Multiple Clients: Test in Gmail, Outlook, Apple Mail
  3. Mobile Devices: Test on mobile email apps
  4. Spam Testing: Check spam score with email testing tools

​
Troubleshooting

​
Common Issues

​
Preview Not Loading

  • Check browser console for JavaScript errors
  • Clear browser cache and cookies
  • Verify template code is valid React Email syntax
  • Check for blocked content or ad blockers

​
Variables Not Working

  • Ensure variable names match exactly (case-sensitive)
  • Check for required variables that might be missing
  • Verify variable types match expected format
  • Review default values for fallback behavior

​
Rendering Errors

  • Validate React Email component usage
  • Check for unsupported HTML elements or attributes
  • Ensure proper JSX syntax throughout template
  • Review error messages in the code editor

​
Getting Help

  • Documentation: Check React Email documentation for component usage
  • Community: Join our Discord for template development help
  • Support: Contact support for technical issues
  • Examples: Browse template gallery for inspiration and patterns
Ready to start using your templates? Open Template Editor →