Skip to content

Components

Jump to bottom
Utshab Luitel edited this page Sep 1, 2025 · 5 revisions

Email Components Reference

Complete guide to all available email components, their properties, and how to use them programmatically.

Overview

Mailyon provides 8 pre-built email components that you can use to create professional email templates. Each component has specific properties that control its appearance and behavior.

Available Components

Component Type Description Location
Header header Company logo, title, and navigation Component Library → Components → Header
Text text Paragraphs, headings, and rich text content Component Library → Components → Text
Image image Single images and graphics Component Library → Components → Image
Button button Call-to-action buttons Component Library → Components → Button
Divider divider Horizontal lines and separators Component Library → Components → Divider
Spacer spacer Vertical spacing element Component Library → Components → Spacer
Footer footer Contact info, social links, and unsubscribe Component Library → Components → Footer
Social Media socialMedia Social media icons and links Component Library → Components → Social Media

1. Header Component

Type: header
Description: Company logo, title, and navigation
Location: Component Library → Components → Header

Properties

interface HeaderProps {
  logo?: string;                    // Logo image URL
  logoWidth?: string;               // Logo width (default: '200px')
  logoHeight?: string;              // Logo height (default: '60px')
  title?: string;                   // Company name/title
  subtitle?: string;                // Tagline or subtitle
  backgroundColor?: string;         // Background color (default: 'transparent')
  textColor?: string;               // Text color (default: '#000000')
  logoVisible?: boolean;            // Show/hide logo (default: true)
  titleVisible?: boolean;           // Show/hide title (default: true)
  subtitleVisible?: boolean;        // Show/hide subtitle (default: true)
  padding?: string;                 // Component padding (default: '5px')
}

Default Values

{
  logo: '',
  logoWidth: '200px',
  logoHeight: '60px',
  title: 'Company Name',
  subtitle: 'Your tagline here',
  backgroundColor: 'transparent',
  textColor: '#000000',
  logoVisible: true,
  titleVisible: true,
  subtitleVisible: true,
  padding: '5px'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'header',
  props: {
    title: 'My Company',
    subtitle: 'Professional Email Templates',
    backgroundColor: '#3b82f6',
    textColor: '#ffffff',
    padding: '20px'
  },
  children: [],
  style: {}
});

2. Text Component

Type: text
Description: Paragraphs, headings, and rich text content
Location: Component Library → Components → Text

Properties

interface TextProps {
  content: string;                  // Text content (HTML supported)
  fontSize?: string;                // Font size (default: '16px')
  fontWeight?: string;              // Font weight (default: 'normal')
  textAlign?: 'left' | 'center' | 'right'; // Text alignment (default: 'left')
  color?: string;                   // Text color (default: '#000000')
  lineHeight?: string;              // Line height (default: '1.5')
  backgroundColor?: string;         // Background color (default: 'transparent')
  textVisible?: boolean;            // Show/hide text (default: true)
  padding?: string;                 // Component padding (default: '5px')
}

Default Values

{
  content: 'Welcome to templify! This is a sample text block where you can add your content. You can customize the font size, weight, alignment, and colors to match your brand.',
  fontSize: '16px',
  fontWeight: 'normal',
  textAlign: 'left',
  color: '#000000',
  lineHeight: '1.5',
  backgroundColor: 'transparent',
  textVisible: true,
  padding: '5px'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'text',
  props: {
    content: 'This is a sample text block added programmatically.',
    fontSize: '18px',
    textAlign: 'center',
    color: '#374151',
    padding: '15px'
  },
  children: [],
  style: {}
});

3. Image Component

Type: image
Description: Single images and graphics
Location: Component Library → Components → Image

Properties

interface ImageProps {
  src: string;                      // Image URL
  alt: string;                      // Alt text for accessibility
  width?: string;                   // Image width (default: '600px')
  height?: string;                  // Image height (default: '300px')
  align?: 'left' | 'center' | 'right'; // Image alignment (default: 'center')
  borderRadius?: string;            // Border radius (default: '0px')
  imageVisible?: boolean;           // Show/hide image (default: true)
  padding?: string;                 // Component padding (default: '5px')
}

Default Values

{
  src: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=300&fit=crop&crop=center',
  alt: 'Professional business image - perfect for your email content',
  width: '600px',
  height: '300px',
  align: 'center',
  borderRadius: '0px',
  imageVisible: true,
  padding: '5px'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'image',
  props: {
    src: 'https://example.com/image.jpg',
    alt: 'Product image',
    width: '400px',
    height: '200px',
    align: 'center',
    borderRadius: '8px'
  },
  children: [],
  style: {}
});

4. Button Component

Type: button
Description: Call-to-action buttons
Location: Component Library → Components → Button

Properties

interface ButtonProps {
  text: string;                     // Button text
  url?: string;                     // Button URL (default: '#')
  backgroundColor?: string;         // Button background color (default: '#3b82f6')
  textColor?: string;               // Button text color (default: '#ffffff')
  borderRadius?: string;            // Border radius (default: '6px')
  padding?: string;                 // Button padding (default: '12px 24px')
  canvasPadding?: string;           // Canvas padding (default: '5px')
  fontSize?: string;                // Font size (default: '16px')
  buttonVisible?: boolean;          // Show/hide button (default: true)
}

Default Values

{
  text: 'Click Here',
  url: '#',
  backgroundColor: '#3b82f6',
  textColor: '#ffffff',
  borderRadius: '6px',
  padding: '12px 24px',
  canvasPadding: '5px',
  fontSize: '16px',
  buttonVisible: true
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'button',
  props: {
    text: 'Learn More',
    url: 'https://example.com',
    backgroundColor: '#059669',
    textColor: '#ffffff',
    borderRadius: '8px',
    padding: '15px 30px',
    fontSize: '18px'
  },
  children: [],
  style: {}
});

5. Divider Component

Type: divider
Description: Horizontal lines and separators
Location: Component Library → Components → Divider

Properties

interface DividerProps {
  color?: string;                   // Line color (default: '#e5e7eb')
  height?: string;                  // Line height/thickness (default: '1px')
  margin?: string;                  // Line margins (default: '2px 2px')
  padding?: string;                 // Component padding (default: '5px')
}

Default Values

{
  color: '#e5e7eb',
  height: '1px',
  margin: '2px 2px',
  padding: '5px'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'divider',
  props: {
    color: '#d1d5db',
    height: '2px',
    margin: '10px 0',
    padding: '5px'
  },
  children: [],
  style: {}
});

6. Spacer Component

Type: spacer
Description: Vertical spacing element
Location: Component Library → Components → Spacer

Properties

interface SpacerProps {
  height: string;                   // Spacer height
  padding?: string;                 // Component padding (default: '5px')
}

Default Values

{
  height: '20px',
  padding: '5px'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'spacer',
  props: {
    height: '40px',
    padding: '5px'
  },
  children: [],
  style: {}
});

7. Footer Component

Type: footer
Description: Contact info, social links, and unsubscribe
Location: Component Library → Components → Footer

Properties

interface FooterProps {
  companyName?: string;             // Company name
  address?: string;                 // Company address
  phone?: string;                   // Phone number
  email?: string;                   // Email address
  socialLinks?: Array<{             // Social media links
    title: string;
    imageUrl: string;
    url: string;
  }>;
  unsubscribeText?: string;         // Unsubscribe text
  unsubscribeUrl?: string;          // Unsubscribe URL
  backgroundColor?: string;         // Background color (default: 'transparent')
  companyNameColor?: string;        // Company name color (default: '#111827')
  contactTextColor?: string;        // Contact text color (default: '#6b7280')
  socialTextColor?: string;         // Social text color (default: '#6b7280')
  unsubscribeTextColor?: string;    // Unsubscribe text color (default: '#9ca3af')
  padding?: string;                 // Component padding (default: '5px')
  contentAlignment?: 'left' | 'center' | 'right'; // Content alignment (default: 'center')
}

Default Values

{
  companyName: 'Company Name',
  address: '123 Main St, City, State 12345',
  phone: '+1 (555) 123-4567',
  email: 'info@company.com',
  socialLinks: [
    { title: 'Facebook', imageUrl: 'https://cdn.jsdelivr.net/gh/simple-icons/simple-icons@v9/icons/facebook.svg', url: '#' },
    { title: 'Twitter', imageUrl: 'https://cdn.jsdelivr.net/gh/simple-icons/simple-icons@v9/icons/twitter.svg', url: '#' },
    { title: 'LinkedIn', imageUrl: 'https://cdn.jsdelivr.net/gh/simple-icons/simple-icons@v9/icons/linkedin.svg', url: '#' }
  ],
  unsubscribeText: 'Click here to unsubscribe',
  unsubscribeUrl: 'https://company.com/unsubscribe',
  backgroundColor: 'transparent',
  companyNameColor: '#111827',
  contactTextColor: '#6b7280',
  socialTextColor: '#6b7280',
  unsubscribeTextColor: '#9ca3af',
  padding: '5px',
  contentAlignment: 'center'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'footer',
  props: {
    companyName: 'My Company',
    address: '456 Business Ave, City, State 54321',
    phone: '+1 (555) 987-6543',
    email: 'contact@mycompany.com',
    backgroundColor: '#f9fafb',
    contentAlignment: 'left'
  },
  children: [],
  style: {}
});

8. Social Media Component

Type: socialMedia
Description: Social media icons and links
Location: Component Library → Components → Social Media

Properties

interface SocialMediaProps {
  platforms: Array<{               // Social media platforms
    platform: string;
    title: string;
    imageUrl: string;
    url: string;
  }>;
  alignment: 'horizontal' | 'vertical'; // Icon alignment (default: 'horizontal')
  type: 'icon' | 'text' | 'iconText';   // Display type (default: 'icon')
  spacing: string;                  // Spacing between icons (default: '16px')
  iconSize: string;                 // Icon size (default: '24px')
  backgroundColor?: string;         // Background color (default: 'transparent')
  padding?: string;                 // Component padding (default: '5px')
}

Default Values

{
  platforms: [
    { platform: 'Facebook', title: 'Facebook', imageUrl: 'https://cdn.jsdelivr.net/gh/simple-icons/simple-icons@v9/icons/facebook.svg', url: '#' },
    { platform: 'Twitter', title: 'Twitter', imageUrl: 'https://cdn.jsdelivr.net/gh/simple-icons/simple-icons@v9/icons/twitter.svg', url: '#' },
    { platform: 'Instagram', title: 'Instagram', imageUrl: 'https://cdn.jsdelivr.net/gh/simple-icons/simple-icons@v9/icons/instagram.svg', url: '#' }
  ],
  alignment: 'horizontal',
  type: 'icon',
  spacing: '16px',
  iconSize: '24px',
  backgroundColor: 'transparent',
  padding: '5px'
}

Programmatic Usage

addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'socialMedia',
  props: {
    platforms: [
      { platform: 'Facebook', title: 'Facebook', imageUrl: 'https://example.com/facebook.svg', url: 'https://facebook.com/mycompany' },
      { platform: 'Twitter', title: 'Twitter', imageUrl: 'https://example.com/twitter.svg', url: 'https://twitter.com/mycompany' }
    ],
    alignment: 'horizontal',
    type: 'iconText',
    spacing: '20px',
    iconSize: '32px'
  },
  children: [],
  style: {}
});

Component Structure

Every component follows this structure:

interface EmailComponent {
  id: string;                       // Unique identifier
  type: ComponentType;              // Component type (header, text, etc.)
  props: Record<string, any>;       // Component properties
  children?: EmailComponent[];      // Child components (for nesting)
  style?: Record<string, any>;      // Custom CSS styles
}

How addComponent Works

When you call addComponent(), here's what happens:

1. Adds New Component (Never Replaces)

  • Creates a new component in the template
  • Does NOT replace existing components
  • Appends to the end of the component list

2. Two Ways to Add:

A) Add to Root Level (Most Common)

addComponent(newComponent);
// Result: Component added to template.components array

B) Add as Child of Another Component

addComponent(newComponent, "parent-component-id");
// Result: Component added to parent's children array

3. Updates Template State

  • Creates new template object (immutable update)
  • Updates metadata.updatedAt timestamp
  • Adds to undo/redo history

4. Example Flow: 

// Before
template.components = [header, text]

// After addComponent(button)
template.components = [header, text, button]  // ← New component added

Component Library Location

All components are available in the Component Library panel:

  • Location: Left sidebar of the EmailTemplateBuilder
  • Section: "Components" (expanded by default)
  • Usage: Drag and drop components onto the canvas

Available in Component Library:

  1. ✅ Header
  2. ✅ Text
  3. ✅ Image
  4. ✅ Button
  5. ✅ Divider
  6. ✅ Spacer
  7. ✅ Footer
  8. ✅ Social Media

Best Practices

1. Always Provide Unique IDs 

addComponent({
  id: Math.random().toString(36).substr(2, 9), // Generate unique ID
  type: 'header',
  props: { /* ... */ },
  children: [],
  style: {}
});

2. Use Default Properties 

// Good: Use default props as starting point
const defaultProps = getDefaultProps('header');
addComponent({
  id: Math.random().toString(36).substr(2, 9),
  type: 'header',
  props: { ...defaultProps, title: 'My Custom Title' },
  children: [],
  style: {}
});

3. Validate Before Adding 

const validation = validateTemplate(template);
if (validation.isValid) {
  addComponent(newComponent);
} else {
  console.error('Template validation failed:', validation.errors);
}

4. Handle Errors Gracefully 

try {
  addComponent(newComponent);
  console.log('Component added successfully');
} catch (error) {
  console.error('Failed to add component:', error);
}

Related Functions

  • updateComponent(id, updates) - Modify existing component
  • deleteComponent(id) - Remove component
  • duplicateComponent(id) - Copy component
  • moveComponent(id, newIndex) - Reorder components
  • insertComponentAt(type, index, props) - Insert at specific position

Next Steps

📚 Documentation

🔗 Resources

🆘 Need Help?

  • Documentation Issues: Create an issue in the main repository
  • Feature Requests: Use the GitHub Issues page
  • Bug Reports: Include steps to reproduce and expected behavior

Built with ❤️ using React, TypeScript, and Tailwind CSS

Email Template Builder - Professional email templates without the generic header!

Email Template Builder

🚀 Getting Started

🧩 Components

🪝 Hooks

🔧 Integration

📤 Export

💡 Examples

📚 API Reference

GitHub Repository NPM Package

Clone this wiki locally