Skip to main content

​
Uploading Your Own Templates

Senderr allows you to create and upload your own email templates to share with the community or use privately. This guide covers everything from template creation to marketplace listing, including specifications, pricing strategies, and optimization for visibility.

​
Getting Started

​
Prerequisites

Before uploading templates, ensure you have:
  • Senderr Account: Free account with email verification
  • React Email Knowledge: Basic understanding of React Email components
  • Design Skills: Email design and HTML/CSS knowledge
  • Content: Template concept, copy, and any required assets

​
Template Creation Process

  1. Plan Your Template: Define purpose, target audience, and key features
  2. Design & Code: Create the React Email template
  3. Test Thoroughly: Ensure compatibility across email clients
  4. Prepare Assets: Create preview images and documentation
  5. Upload & Publish: Submit to marketplace for review

​
Template Specifications

​
Technical Requirements

​
Supported Framework

  • React Email: All templates must use React Email components
  • Version Support: Compatible with React Email v1.0.0+
  • Component Library: Use official @react-email/components

​
Code Standards

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

// Main template component (required)
export default function TemplateName({
  // Define props with default values
  name = 'there',
  company = 'Company'
}) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Container>
          <Text>Hello {name}!</Text>
          <Text>Welcome to {company}.</Text>
        </Container>
      </Body>
    </Html>
  );
}

// Optional: Export variable schema for better integration
export const schema = {
  name: {
    type: 'string',
    required: true,
    description: 'Recipient name'
  },
  company: {
    type: 'string',
    required: false,
    default: 'Company',
    description: 'Company name'
  }
};

​
File Requirements

  • Single File: Template must be contained in one .tsx/.jsx file
  • File Size: Maximum 500KB per template
  • External Dependencies: Only React Email components allowed
  • Images: Use absolute URLs or base64 for embedded images

​
Design Requirements

​
Email Client Compatibility

  • Outlook: Must render correctly in Outlook 2016-2021
  • Gmail: Support both desktop and mobile Gmail
  • Apple Mail: Compatible with iOS and macOS Mail
  • Other Clients: Yahoo Mail, Thunderbird, etc.

​
Responsive Design

// Responsive container
<Container style={{
  maxWidth: '600px',
  margin: '0 auto',
  padding: '20px'
}}>

// Mobile-friendly text
<Text style={{
  fontSize: '16px',
  lineHeight: '1.4',
  '@media (max-width: 600px)': {
    fontSize: '14px'
  }
}}>
  Your content here
</Text>
</Container>

​
Accessibility Standards

  • Alt Text: All images must have descriptive alt text
  • Color Contrast: Minimum 4.5:1 contrast ratio
  • Semantic HTML: Use proper heading hierarchy
  • Screen Readers: Test with screen reader tools

​
Template Information

​
Required Template Details

​
Basic Information

  • Title: Clear, descriptive template name (max 60 characters)
  • Subtitle: Brief description (max 120 characters)
  • Description: Detailed explanation in Markdown format
  • Category: Select from available categories
    • Newsletter
    • Transactional
    • Marketing
    • E-commerce
    • Notification
    • Welcome/Onboarding

​
Template Metadata

# Template Title
**Subtitle**: Professional welcome email for SaaS platforms

## Description
This template is perfect for welcoming new users to your SaaS platform.
It includes:

- Clean, professional design
- Customizable branding elements
- Call-to-action buttons
- Mobile-responsive layout
- Dark mode support

## Use Cases
- User onboarding
- Account activation
- Welcome sequences
- Product introductions

## Variables
- `name`: User's first name
- `company`: Your company name
- `productName`: Name of your product/service
- `confirmUrl`: Email confirmation link
- `supportEmail`: Support contact email

​
Cover Image Requirements

​
Image Specifications

  • Format: PNG, JPG, or WebP
  • Size: 1200x630 pixels (1.91:1 aspect ratio)
  • File Size: Maximum 2MB
  • Quality: High resolution, crisp design
  • Content: Show actual email preview, not generic graphics

​
Design Best Practices

  • Template Preview: Show the actual email template
  • Clean Background: Use neutral background colors
  • Readable Text: Ensure template content is legible
  • Professional Look: Avoid cluttered or amateur-looking designs
  • Branding: Subtle branding elements if desired

​
Preview Images

​
Multiple Previews

  • Desktop View: Full desktop email client view
  • Mobile View: Mobile email app preview
  • Dark Mode: Dark theme compatibility (if supported)
  • Variations: Different color schemes or layouts

​
Image Guidelines

  • Format: PNG preferred for crisp quality
  • Size: 800x600 pixels minimum
  • Quantity: 3-6 preview images recommended
  • Variety: Show different features and use cases

​
Variable Schema & Dynamic Content

​
Defining Variables

​
Variable Types

export const schema = {
  // String variables
  userName: {
    type: 'string',
    required: true,
    description: 'User\'s full name',
    example: 'John Doe'
  },

  // Number variables
  orderTotal: {
    type: 'number',
    required: true,
    description: 'Order total in dollars',
    example: 99.99
  },

  // Boolean variables
  showFooter: {
    type: 'boolean',
    required: false,
    default: true,
    description: 'Whether to show footer section'
  },

  // Array variables
  products: {
    type: 'array',
    required: false,
    default: [],
    description: 'List of product objects',
    example: [
      { name: 'Product 1', price: 29.99 },
      { name: 'Product 2', price: 39.99 }
    ]
  },

  // Object variables
  user: {
    type: 'object',
    required: true,
    description: 'User profile information',
    example: {
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]'
    }
  }
};

​
Default Values

Always provide sensible defaults: 
export default function Template({
  userName = 'there',
  companyName = 'Company',
  products = [],
  showPromotion = false,
  brandColor = '#007bff'
}) {
  return (
    <Html>
      <Body>
        <Text>Hello {userName}!</Text>
        {showPromotion && (
          <Container style={{ backgroundColor: brandColor }}>
            <Text>Special Promotion!</Text>
          </Container>
        )}
        {products.length > 0 && (
          <Container>
            {products.map((product, index) => (
              <Text key={index}>{product.name}: ${product.price}</Text>
            ))}
          </Container>
        )}
      </Body>
    </Html>
  );
}

​
Documentation Importance

​
Why Good Documentation Matters

  • Discoverability: Better search rankings in marketplace
  • User Adoption: Clear documentation increases usage
  • Support Reduction: Fewer support requests
  • Professional Image: Demonstrates quality and attention to detail
  • Marketplace Featuring: Well-documented templates get featured

​
Documentation Best Practices

# Professional Invoice Template

## Overview
Clean, professional invoice template perfect for freelancers and small businesses.

## Features
✅ Automatic tax calculations
✅ Multiple currency support
✅ Itemized billing
✅ Payment terms section
✅ Company branding areas

## Required Variables
- `invoiceNumber`: Unique invoice identifier
- `clientName`: Client or customer name
- `items`: Array of invoice line items
- `dueDate`: Payment due date

## Optional Variables
- `logo`: Company logo URL (default: none)
- `taxRate`: Tax percentage (default: 0)
- `currency`: Currency symbol (default: '$')

## Usage Example
```json
{
  "invoiceNumber": "INV-001",
  "clientName": "Acme Corp",
  "items": [
    { "description": "Web Design", "quantity": 1, "rate": 2500 }
  ],
  "dueDate": "2024-02-15",
  "logo": "https://yourcompany.com/logo.png",
  "taxRate": 8.5
}

​
Customization

This template supports extensive customization including:
  • Brand colors and fonts
  • Logo placement and sizing
  • Payment terms and conditions
  • Additional business information

## Pricing Strategy

### Understanding Template Pricing

#### Free Templates
- **Purpose**: Build reputation and showcase skills
- **Benefits**: Higher download volume, community feedback
- **Strategy**: Use as portfolio pieces and lead generators
- **Monetization**: Can drive paid template sales

#### Paid Templates
- **Price Range**: $5 - $50 per template (typical)
- **Factors**: Complexity, niche market, unique features
- **Premium Features**: Advanced functionality, multiple variations
- **Bundle Opportunities**: Package related templates together

### Pricing Guidelines

#### Beginner Templates ($5-$15)
- Simple layouts and basic functionality
- Common use cases (welcome emails, newsletters)
- Limited customization options
- Good for building initial reputation

#### Professional Templates ($15-$30)
- Sophisticated design and advanced features
- Specific industry focus
- Multiple layout variations
- Comprehensive documentation

#### Premium Templates ($30-$50)
- Highly specialized or complex templates
- Multiple template variations in one package
- Advanced interactive elements
- White-label ready with extensive customization

### Marketplace Visibility

#### Search Optimization
- **Keywords**: Use relevant keywords in title and description
- **Categories**: Choose the most appropriate category
- **Tags**: Add relevant tags for discoverability
- **Quality**: High-quality templates rank higher

#### Featured Placement
Templates can be featured based on:
- **Quality Score**: Code quality, design, documentation
- **User Ratings**: High ratings from purchasers
- **Download Volume**: Popular templates get more visibility
- **Creator Reputation**: Established creators get priority
- **Seasonal Relevance**: Holiday and seasonal templates

## Upload Process

### Step-by-Step Upload

#### 1. Access Upload Interface
- Go to [Dashboard → Create Template](https://senderr.dev/dashboard/templates/new)
- Choose "Upload New Template"
- Review submission guidelines

#### 2. Template Information
Title: [Enter descriptive title] Subtitle: [Brief one-line description] Category: [Select appropriate category] Tags: [Add relevant tags] Price: [Set price or mark as free] 

#### 3. Upload Template Code
- Paste or upload your React Email template code
- System validates code automatically
- Preview is generated automatically
- Test with sample variables

#### 4. Add Assets
- Upload cover image (required)
- Add preview images (recommended)
- Include any additional documentation

#### 5. Description & Documentation
- Write comprehensive description in Markdown
- Document all variables and their purposes
- Provide usage examples
- Add customization instructions

#### 6. Review & Submit
- Preview your template listing
- Test template rendering with various inputs
- Submit for marketplace review
- Receive approval notification

### Review Process

#### Automated Review
- **Code Validation**: Ensures React Email compliance
- **Security Scanning**: Checks for malicious code
- **Rendering Test**: Verifies template renders correctly
- **Asset Validation**: Confirms image quality and formats

#### Manual Review
- **Design Quality**: Human review of visual design
- **Documentation Quality**: Assessment of documentation completeness
- **Market Fit**: Evaluation of market demand and uniqueness
- **Brand Guidelines**: Compliance with platform standards

#### Review Timeline
- **Automated**: Instant validation and feedback
- **Manual Review**: 1-3 business days
- **Revisions**: Address feedback and resubmit
- **Approval**: Template goes live in marketplace

## Template Management

### After Upload

#### Performance Tracking
- **Downloads**: Track template download numbers
- **Revenue**: Monitor earnings from paid templates
- **Ratings**: User feedback and ratings
- **Analytics**: Detailed performance metrics

#### Template Updates
- **Version Control**: Update templates while preserving user libraries
- **Bug Fixes**: Address issues discovered after release
- **Feature Additions**: Add new functionality over time
- **Seasonal Updates**: Refresh templates for relevance

#### Marketing Your Templates
- **Social Media**: Share templates on social platforms
- **Portfolio**: Feature templates in your design portfolio
- **Community**: Engage with Senderr community
- **Content Marketing**: Write about template creation process

### Best Practices for Success

#### Quality Focus
- **User Testing**: Test templates with real users
- **Feedback Integration**: Incorporate user feedback
- **Continuous Improvement**: Regularly update and enhance templates
- **Professional Standards**: Maintain high quality standards

#### Community Engagement
- **Help Others**: Answer questions in community forums
- **Share Knowledge**: Write tutorials and guides
- **Collaborate**: Work with other template creators
- **Feedback**: Provide constructive feedback on other templates

## Troubleshooting

### Common Upload Issues

#### Template Validation Errors
- **Invalid React Email Code**: Use only supported components
- **Missing Default Values**: Ensure all props have defaults
- **Large File Size**: Optimize template code and assets
- **External Dependencies**: Remove unsupported imports

#### Asset Upload Problems
- **Image Size**: Ensure images meet size requirements
- **File Format**: Use supported image formats (PNG, JPG, WebP)
- **Upload Timeout**: Check internet connection and file sizes
- **Quality Issues**: Improve image resolution and clarity

#### Review Rejection
- **Design Quality**: Improve visual design and layout
- **Documentation**: Add comprehensive documentation
- **Market Fit**: Ensure template serves a real need
- **Technical Issues**: Fix code validation errors

### Getting Help

- **Documentation**: Review React Email documentation
- **Community**: Ask questions in Discord community
- **Support**: Contact support for technical issues
- **Examples**: Study successful templates for inspiration

## Success Stories

### Template Creator Tips

> "Focus on solving real problems. My most successful templates address specific pain points I encountered in my own work." - Sarah Chen, Top Template Creator

> "Documentation is everything. The templates with the best documentation consistently outperform others, even if the design is simpler." - Marcus Rodriguez, Template Designer

> "Start with free templates to build your reputation, then gradually introduce paid templates as your audience grows." - Lisa Thompson, Email Designer

---

**Ready to share your templates with the world?** [Start Uploading →](https://senderr.dev/dashboard/templates/new)