Complete User Guide
MailSwift Guide
Everything you need to design professional emails, master all 19 components, and send with confidence using your own SMTP.
Getting Started
MailSwift is a professional iOS email studio that lets you design pixel-perfect HTML emails visually. Build layouts, manage your asset library, and watch production-ready code generate in real-time. All your work stays local to your device for maximum performance and flow.
What is MailSwift?
MailSwift transforms your iPhone or iPad into a complete email design studio. Build responsive HTML emails using a visual drag-and-drop editor, and the app automatically generates production-ready HTML code that works across all major email clients.
Visual Design
Drag and drop components to build layouts visually.
Auto HTML
Your designs are automatically converted to clean HTML code.
Direct Send
Send emails via your own SMTP accounts.
The 4-Tab Interface
MailSwift is organized into four main tabs, each with a specific purpose:
Editor
The main canvas where you design your emails using visual components.
Templates
Browse, search, and manage your saved email templates.
Assets
Manage your Image Library, Video Library, and Font Library.
Settings
Configure theme, email accounts, signatures, and data management.
The Visual Editor
The Editor is where the magic happens. Design emails visually, and MailSwift automatically generates clean, production-ready HTML code.
Canvas Overview
The main canvas displays your email structure with selectable components. Tap any component to select it and reveal the Edit button for property adjustments.
Header Toolbar
- Undo/Redo — Revert changes with full history
- Zoom — Scale canvas from 25% to 200%
- Structure — View component hierarchy tree
- Preview — See final HTML output
Floating Action Buttons (FABs)
Add Button
Opens component palette to add new elements. Always visible.
Edit Button
Opens properties for selected component. Only appears when selected.
Note: FABs stick to screen edges and can be swiped to morph and move between sides.
Component Properties
Every component has customizable properties organized into sections:
Styling
Background color, borders, border radius (0-48px)
Layout
Padding (4-sided), margin, alignment options
Advanced
Custom CSS classes, HTML attributes
All 19 Components
MailSwift provides 19 component types organized into four categories. Each component is designed for a specific purpose in email design.
Body
The root container for your entire email.
Use case: Every email starts with a Body component. Set your email subject, preheader text, canvas width (default 600px), and background colors here.
Tip: Keep canvas width between 580-640px for optimal rendering across email clients.
Wrapper
Container with dual background and max-width constraint.
Use case: Create centered content areas with different inner and outer background colors. Perfect for full-width colored bands.
Tip: Use 'Outer Background' for the full-width viewport and 'Background Color' for the content area.
Row
Horizontal layout container that holds columns.
Use case: Create multi-column layouts by adding Rows and placing Columns inside them. Perfect for side-by-side content like image + text.
Tip: Use background images on Rows for full-width visual sections. Rows support vertical alignment options.
Column
Vertical content container within a Row.
Use case: Hold your actual content (text, images, buttons). Set width from 5-100% to create different column ratios.
Tip: For a 2-column layout, use two 50% columns. For 3-column, use three 33% columns. Columns stack on mobile.
Text
Rich text content with full formatting options.
Use case: Headlines, paragraphs, lists, and any text content. Supports Google Fonts, custom fonts, bold, italic, underline, and text alignment.
Tip: Use 14-16px for body text, 24-32px for headlines. Limit to 2-3 fonts per email for professional appearance.
Button
Call-to-action buttons with customizable styling.
Use case: Drive clicks to your website, products, or landing pages. Set link URL, button colors, padding, and border radius.
Tip: Make CTAs stand out with contrasting colors. Use action verbs like 'Shop Now', 'Learn More', 'Get Started'.
Image
Pictures with automatic aspect ratio preservation.
Use case: Product photos, logos, banners, and visual content. Supports WebP format and auto-aspect ratio to prevent distortion.
Tip: Use Image Library to store and reuse images. Always set alt text for accessibility. Keep image file sizes reasonable.
Video
Video thumbnails with play button overlay.
Use case: Showcase video content with a clickable thumbnail that links to YouTube, Vimeo, or any video platform.
Tip: Most email clients don't support embedded video playback. The thumbnail + play button pattern is the industry standard.
Divider
Visual separator lines between content sections.
Use case: Create clear visual breaks between different sections of your email. Customize height, color, and width.
Tip: Use subtle dividers (light gray, 1px) to separate content without being distracting.
Spacer
Invisible whitespace for precise layout control.
Use case: Add vertical breathing room between components. Adjustable from 0-200px height.
Tip: Use consistent spacing (16px, 24px, 32px) throughout your email for visual rhythm.
Table
Structured data in rows and columns.
Use case: Display pricing tables, comparison charts, schedules, or any tabular data. Add rows and columns as needed.
Tip: Keep tables simple for email—complex tables may not render well on mobile. Use for data that benefits from grid layout.
Hero
Large background section with overlay content.
Use case: Create impactful opening sections with a full-width background image, headline, subheadline, and CTA button overlay.
Tip: Choose high-contrast text colors that remain readable over your background image. Includes Outlook VML support.
Social
Social media icon links.
Use case: Add links to your social profiles: Facebook, Instagram, LinkedIn, YouTube, X (Twitter), and more. Horizontal or vertical layout.
Tip: Place social links in your footer. Keep icon sizes consistent (24-32px). Only include platforms you actively use.
Product Card
E-commerce product showcase component.
Use case: Display products with image, name, description, price, original price (strikethrough for sales), and CTA button.
Tip: Perfect for promotional emails and abandoned cart campaigns. Use high-quality product images.
Testimonial Card
Customer testimonial with photo and star rating.
Use case: Build trust with customer quotes, names, titles, photos, and 1-5 star ratings. Customizable background styling.
Tip: Keep testimonials concise and authentic. Include customer photos when possible for credibility.
Footer
Standardized legal compliance and contact block.
Use case: Add company logo, social links, physical address, and required legal links (Unsubscribe, Privacy Policy) in one tap. Supports multiple styles.
Tip: Uses 'Data Retention Pattern'—your address and links are saved even if you toggle them off temporarily.
Tracker
Invisible analytics tracking pixel.
Use case: Add a 1x1 transparent pixel to track email opens. Set campaign ID for analytics tracking.
Tip: Single-pixel tracking for engagement metrics. Campaign ID appears in the editor toolbar for reference.
Raw HTML
Custom HTML/CSS code injection.
Use case: Advanced users can add custom code, email client-specific fixes, or custom CSS. Content is sanitized for email safety.
Tip: Use for advanced customizations that components don't support. Test thoroughly in multiple email clients.
Group
Organize and nest components logically.
Use case: Bundle related components together for better organization. Useful for complex layouts with many nested elements.
Tip: Use Groups to keep your component tree organized, especially in long emails with many sections.
Template Management
Save time by reusing your best designs. Templates let you start from proven layouts instead of building from scratch.
Using Templates
- Open the Templates tab to browse your saved templates
- Use the search bar to find templates by name or content
- Filter by category to narrow down options
- Tap "Use Template" to load it into the editor
Saving Templates
- Design your email in the editor until you're happy with it
- Open the more options menu (⋯) in the toolbar
- Select "Save as Template" and give it a name
- Choose a category to keep your templates organized
Pro Tip: My Components
Beyond full templates, you can save individual sections (headers, footers, feature blocks) to "My Components". Organize them with categories for quick access while editing.
Asset Management
Manage all your creative assets in one place. The Assets tab contains your Image Library, Video Library, and Font Library.
Image Library
- • Upload photos from your device
- • Thumbnails generated automatically
- • WebP format support for modern compression
- • Images appear in Image component picker
- • Base64 embedding for reliable email delivery
Video Library
- • Store video metadata (thumbnail + video URL)
- • Quick selection in Video components
- • Links to YouTube, Vimeo, or any platform
- • Organize videos by category
Font Library
- • Browse and download Google Fonts
- • System fonts available as fallbacks
- • Font preview before downloading
- • Fonts auto-loaded in email exports
Sending Emails via SMTP
Send emails directly from MailSwift using your own email accounts. MailSwift supports 12+ email providers with secure TLS/SSL connections.
Setting Up Email Accounts
Open Settings
Go to Settings → Email Accounts
Add Account
Select provider & enter credentials
Start Sending
Select account when sending emails
Supported Providers
Gmail
Requires App Password (2FA must be enabled)
App Password RequiredOutlook / Hotmail
Works with account credentials
Yahoo Mail
Requires App Password
App Password RequirediCloud Mail
Requires App Password
App Password RequiredAOL Mail
Requires App Password
App Password RequiredProton Mail
Requires Proton Bridge + App Password
App Password RequiredZoho Mail
Requires App Password
App Password RequiredFastmail
Requires App Password
App Password RequiredGMX
Works with account credentials
Yandex Mail
Requires App Password
App Password RequiredMail.com
Works with account credentials
Microsoft 365 / Exchange Online
Works with account credentials
Rate Limits
Most email providers limit how many emails you can send per day (typically ~500 for personal accounts). MailSwift enforces rate limiting to prevent provider lockouts. For high-volume sending, consider using a professional email service provider.
Deliverability & Validation
MailSwift helps you create emails that actually reach the inbox. The validation system checks your email for potential issues and provides actionable feedback.
Deliverability Score
Before you hit send, MailSwift runs a deep analysis of your content and configuration to generate a Deliverability Score (0-100). This score reflects how likely your email is to bypass spam filters and land in the primary inbox.
Critical Errors
Score: 0-40
Major spam triggers or invalid technical setup. Fix required.
Warnings
Score: 41-79
Content optimization suggested. Check image ratios and links.
Excellent
Score: 80-100
Optimal content and technical alignment. Ready for delivery.
What Gets Checked
- HTML size (aim for under 102KB)
- Subject line presence and quality
- Preheader text for inbox preview
- Accessibility considerations
- Anti-spam pattern detection
Force Light Mode
Some email clients apply dark mode transformations that can break your design. Enable "Force Light Mode" in Email Settings to add metadata that requests email clients to display your email in light mode.
When to use: When your email has dark text on light backgrounds, or when you want consistent rendering across clients.
Email Design Tips & Tricks
Master these techniques to create professional, effective emails that convert.
Layout Patterns
Common email layouts and how to build them:
Two-Column Layout
Row → Column (50%) + Column (50%)
Image on left, text on right (or vice versa). Great for feature highlights.
Three-Column Layout
Row → Column (33%) × 3
Display three products, features, or options side by side.
Sidebar Layout
Row → Column (30%) + Column (70%)
Navigation or summary on left, main content on right.
Hero + Content
Hero → Row → Column → Text/Images
Eye-catching opening followed by detailed content sections.
Card Grid
Multiple Rows with equal-width Columns
Display products, articles, or team members in a grid.
Typography Tips
Font Sizes
- • Headlines: 24-32px
- • Subheadings: 18-20px
- • Body text: 14-16px
- • Fine print: 12px minimum
Font Pairing
- • Limit to 2-3 fonts per email
- • One display font for headings
- • One readable font for body
- • Use weight variations for hierarchy
Color Usage
- • Use brand colors consistently
- • High contrast for CTAs (make them pop)
- • Dark text on light backgrounds for readability
- • Test colors in dark mode email clients
- • Avoid color as the only indicator (accessibility)
Mobile Optimization
- • MailSwift generates responsive HTML automatically
- • Columns stack vertically on mobile
- • Use large tap targets (44px+ for buttons)
- • Keep text readable without zooming
- • Test on actual mobile devices
Productivity Shortcuts
Save Components
Save headers, footers, and feature sections as reusable components
Use Structure View
Navigate complex layouts easily with the component tree
Undo Liberally
Full history means you can experiment without fear
Preview Often
Check HTML preview to see the final output
Testing Strategy Before Sending
- Run validation and fix any errors
- Review warnings and address if needed
- Use HTML Preview to see the final render
- Send a test email to yourself
- Open the test on mobile and desktop
- Click all links to verify they work
- Send to production only when satisfied
Settings & Data Management
Configure MailSwift to work the way you prefer. All settings and data are stored locally on your device until you choose to send or export.
Appearance
Choose from Light, Dark, or System theme. The app adapts to your preference with appropriate colors throughout.
Security
All passwords are stored securely using iOS Keychain, never in plain text. Your data is protected by iOS security features.
Export Data
Export all your emails, templates, and settings. Optional passphrase encryption for secure backups. Perfect for moving data between devices.
Clear All Data
Permanently removes everything: emails, templates, My Components, assets, accounts, and preferences. This cannot be undone.
Frequently Asked Questions
Common questions and answers about using MailSwift.
My email looks different in Outlook than in Gmail. Why?
Email clients render HTML differently. MailSwift generates cross-client compatible HTML, but some differences are unavoidable. Use the Force Light Mode option for more consistent rendering. Always test in multiple clients before sending important emails.
What's the maximum email size I should aim for?
Keep your email HTML under 102KB for optimal delivery. Large emails may be clipped by Gmail. MailSwift's validation will warn you if your email is too large. Optimize images and avoid excessive content.
Why do I need an App Password for Gmail?
Google requires App Passwords for third-party apps when 2FA is enabled. Go to your Google Account → Security → App Passwords to generate one. This is more secure than using your regular password.
Can I import HTML from other email builders?
MailSwift is designed for visual email creation. While you can use the Raw HTML component to add custom code, full HTML import isn't supported. However, you can recreate any design using the visual components.
How do I make my emails mobile-friendly?
MailSwift generates responsive HTML automatically. Columns stack vertically on mobile. Use adequate font sizes (14-16px minimum), large tap targets for buttons, and test your emails on mobile devices.
Where is my data stored?
All your designs, templates, and assets are stored locally on your device. Passwords are securely stored using iOS Keychain. Your data only leaves your device when you choose to send an email or export files—actions you explicitly initiate.
What is the difference between a Wrapper and the Body?
The Body is the root of your entire email (you only have one). A Wrapper is a container you can use multiple times to create sections with different inner and outer background colors. Wrappers are perfect for creating full-width colored bands that span the entire viewport while keeping your content centered. The Body sets the global subjects and preheaders, while Wrappers handle segment-specific styling.
Can I use custom fonts?
Yes! MailSwift supports Google Fonts and custom fonts. Browse and download fonts from the Font Library. Note that custom fonts may not render in all email clients—fallback fonts will be used when needed.
What happens if I clear all data?
Clear All Data permanently removes all emails, templates, My Components, assets, email accounts, and preferences. This action is irreversible. Use Export Data first if you want to backup your work.
Ready to start designing?
You now have everything you need to create professional HTML emails with MailSwift. Start building your first email and see how easy it can be.