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

Plan Your Template: Define purpose, target audience, and key features
Design & Code: Create the React Email template
Test Thoroughly: Ensure compatibility across email clients
Prepare Assets: Create preview images and documentation
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: 'john@example.com'
    }
  }
};

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)

Getting Started

Integrations

Templates

Platform

Uploading Your Own Templates

Uploading Your Own Templates

Getting Started

Prerequisites

Template Creation Process

Template Specifications

Technical Requirements

Supported Framework

Code Standards

File Requirements

Design Requirements

Email Client Compatibility

Responsive Design

Accessibility Standards

Template Information

Required Template Details

Basic Information

Template Metadata

Cover Image Requirements

Image Specifications

Design Best Practices

Preview Images

Multiple Previews

Image Guidelines

Variable Schema & Dynamic Content

Defining Variables

Variable Types

Default Values

Documentation Importance

Why Good Documentation Matters

Documentation Best Practices

Customization

​Uploading Your Own Templates

​Getting Started

​Prerequisites

​Template Creation Process

​Template Specifications

​Technical Requirements

​Supported Framework

​Code Standards

​File Requirements

​Design Requirements

​Email Client Compatibility

​Responsive Design

​Accessibility Standards

​Template Information

​Required Template Details

​Basic Information

​Template Metadata

​Cover Image Requirements

​Image Specifications

​Design Best Practices

​Preview Images

​Multiple Previews

​Image Guidelines

​Variable Schema & Dynamic Content

​Defining Variables

​Variable Types

​Default Values

​Documentation Importance

​Why Good Documentation Matters

​Documentation Best Practices

​Customization

Uploading Your Own Templates

Getting Started

Prerequisites

Template Creation Process

Template Specifications

Technical Requirements

Supported Framework

Code Standards

File Requirements

Design Requirements

Email Client Compatibility

Responsive Design

Accessibility Standards

Template Information

Required Template Details

Basic Information

Template Metadata

Cover Image Requirements

Image Specifications

Design Best Practices

Preview Images

Multiple Previews

Image Guidelines

Variable Schema & Dynamic Content

Defining Variables

Variable Types

Default Values

Documentation Importance

Why Good Documentation Matters

Documentation Best Practices

Customization