Stop Fighting Email Clients! Use Maily.to Instead

What if I told you that the most soul-crushing part of your job isn't the complex API architecture or the endless sprint meetings? It's that innocent-looking HTML email you need to send tomorrow morning. You know the one—the "simple" newsletter that looks gorgeous in your browser, then completely disintegrates in Outlook 2016, Gmail's mobile app, or Apple Mail's dark mode.

Here's the brutal truth: email rendering is still the Wild West of web development^{↗ Bright Coding Blog}. While we've conquered responsive web design, CSS Grid, and container queries, email clients remain stubbornly stuck in 1999. Table layouts. Inline styles. Conditional comments for Outlook. Mso- prefixes that feel like ancient incantations. The average developer wastes 6-8 hours per email template wrestling with these inconsistencies—and that's before testing across the dozen-plus clients your users actually use.

But what if you could skip this nightmare entirely? What if there was a tool that absorbed all this pain so you could focus on what actually matters—your message, your brand, your conversion?

Enter Maily.to—the open-source email editor that's making experienced developers quietly abandon their hand-coded templates and never look back. Created by Arik Chakma, this isn't another drag-and-drop toy that generates bloated, fragile markup. It's a deliberately opinionated, component-based system built by someone who clearly suffered through email hell and decided to build the escape hatch.

In this deep dive, I'll expose exactly why Maily.to is becoming the secret weapon for teams at companies like Novu—and why your next email campaign should probably start here instead of your code editor.

What is Maily.to? The Email Editor That Actually Gets It

Maily.to is an open-source, web-based email editor designed around one radical premise: email should be componentized, not customized into oblivion. Rather than giving you a blank canvas and a prayer, Maily provides a curated library of pre-designed, battle-tested components that render consistently across all major email clients—including the notoriously problematic ones.

The project lives at github.com/arikchakma/maily.to and is actively maintained by Arik Chakma, a developer who clearly understands that developer experience (DX) matters as much as user experience. The repository has gained significant traction in the developer community, earning sponsorship from established companies like Novu—a notification infrastructure platform that knows a thing or two about reliable message delivery.

Why It's Trending Now

Several forces have converged to make Maily.to particularly relevant:

• The "email renaissance": Despite predictions of its death, email engagement has increased—but user expectations for visual quality have skyrocketed
• React^{↗ Bright Coding Blog} Email and similar libraries proved developers want code-based email solutions, but many teams need a visual interface for non-technical stakeholders
• The open-source wave: Teams are increasingly rejecting vendor-locked SaaS email builders with unpredictable pricing
• Dark mode complexity: Modern email clients' dark mode implementations have made manual testing exponentially harder—Maily's components handle this automatically

Maily occupies a unique position: more structured than raw HTML/CSS, more reliable than generic page builders, and more flexible than template-only services. It's the Goldilocks zone for teams that need both developer control and marketer accessibility.

Key Features: The Technical Details That Matter

Let's dissect what makes Maily.to genuinely powerful under the hood—not just marketing fluff.

Pre-Designed, Email-Client-Tested Components

This is Maily's core innovation. Each component—Logo, Buttons, Variables, Images, Link Cards, Columns, and more—has been engineered specifically for email rendering constraints. The "opinionated" design means you don't get infinite customization that breaks things; you get smart defaults that work.

• Buttons and Variants: Not just <a> tags with padding. Maily generates bulletproof buttons using table-based structures with conditional mso- comments for Outlook, ensuring clickability across all clients
• Variables: Dynamic content injection with proper escaping—critical for transactional emails where raw user input could break rendering or create security issues
• Link Cards: Rich preview cards that degrade gracefully when image loading is disabled, with proper fallbacks for text-only clients

Mobile-Ready Architecture

"Mobile-ready" in email doesn't just mean media queries (which Gmail still strips in some contexts). Maily's components use fluid hybrid techniques—percentage-based widths with max-width constraints, ghost columns, and conditional stacking that works even in clients with limited CSS support.

Conditional Display Logic

The Show If Condition and Repeat components enable personalization at scale without template engine complexity. This isn't just {{#if}} syntax—it's visual conditional blocks that non-developers can configure, outputting the appropriate conditional comments and display rules for each email client.

Section & Column System

Email columns are notoriously fragile. Maily's implementation handles the necessary table nesting, ghost columns for Outlook, and responsive stacking automatically. You get the visual result without understanding why <!--[if mso]> exists.

Clean, Exportable Output

Unlike many visual editors that generate nightmare HTML, Maily produces reasonably clean markup that you can further customize if needed. This matters for teams with existing design systems or deliverability optimization requirements.

Use Cases: Where Maily.to Actually Shines

1. SaaS Transactional Emails at Scale

You're sending password resets, onboarding sequences, and billing notifications. These need to be branded, reliable, and maintainable—but your engineering team has better things to do than test welcome emails in Outlook 2013. Maily lets your growth team own the content while your engineers trust the output.

The pain it solves: "Our welcome email broke in dark mode and we didn't notice for three weeks."

2. Marketing Newsletters Without the Headcount

Small teams need professional newsletters but can't justify a dedicated email developer. Maily's component system means your content marketer can build visually consistent, on-brand emails without accidentally creating a mobile disaster.

The pain it solves: "Our CEO designed an email in [generic builder] and it took 4 hours to fix the mobile rendering."

3. White-Label Email Platforms

Building an email feature into your product? Maily's open-source license (MIT) means you can embed its capabilities without per-email SaaS fees eating your margins. The component architecture also means your users get constraints that protect deliverability.

The pain it solves: "Our white-label email tool became our biggest infrastructure cost."

4. Rapid A/B Testing Infrastructure

Email variant testing is slow when each version requires developer time. Maly's visual editor enables marketer-driven experimentation with the confidence that technical implementation won't skew results.

The pain it solves: "By the time we coded the test variant, the campaign timing window closed."

Step-by-Step Installation & Setup Guide

Ready to run Maily.to locally or self-host? Here's the complete setup based on the official repository.

Prerequisites

Before starting, ensure you have:

• Node.js (v18+ recommended for modern features)
• pnpm package manager (npm install -g pnpm if needed)
• Git for cloning
• A Supabase project with Google and GitHub OAuth configured (for authentication)

Local Development Setup

Execute these commands in your terminal:

# Step 1: Clone the repository
git clone https://github.com/arikchakma/maily.to

# Step 2: Navigate into the project directory
cd maily.to

# Step 3: Copy the environment configuration template
cp ./apps/web/.env.example ./apps/web/.env

Now open ./apps/web/.env in your editor and configure your Supabase credentials. You'll need to:

1. Create a project at supabase.com
2. Enable Google and GitHub authentication providers in your Supabase dashboard
3. Add the redirect URLs for your local development environment
4. Copy the project URL and anon/public key into your .env file

For detailed OAuth setup, refer to Supabase's official auth documentation.

# Step 4: Install all dependencies (monorepo-wide)
pnpm install

# Step 5: Start the development server
pnpm dev

The application should now be running at http://localhost:3000 (or your configured port). The monorepo structure uses modern tooling—likely Turborepo or similar—to orchestrate the web app and any shared packages.

Production Deployment Considerations

For production self-hosting:

• Replace development Supabase credentials with production project keys
• Configure proper OAuth callback URLs for your domain
• Set up environment-specific variables for analytics, error tracking, etc.
• Consider containerization with Docker^{↗ Bright Coding Blog} for consistent deployments

REAL Code Examples: Inside Maily.to's Implementation

While Maily.to is primarily a visual editor, understanding its underlying patterns reveals why it's so reliable. Let me walk you through key implementation concepts derived from the repository's architecture.

Example 1: Basic Editor Integration Pattern

The simplest way to understand Maily's approach is examining how its components render to email-safe HTML. Here's a conceptual representation of how a bulletproof button component would be structured:

<!-- Maily.to generates this complex structure automatically -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center" style="border-radius: 4px; background: #0a0a0a;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
                   xmlns:w="urn:schemas-microsoft-com:office:word"
                   href="https://example.com" 
                   style="height:40px;v-text-anchor:middle;width:200px;"
                   arcsize="10%" 
                   stroke="f" 
                   fillcolor="#0a0a0a">
        <w:anchorlock/>
        <center>
      <![endif]-->
      <a href="https://example.com"
         style="background-color:#0a0a0a;border-radius:4px;color:#ffffff;
                display:inline-block;font-family:sans-serif;font-size:16px;
                font-weight:bold;line-height:40px;text-align:center;
                text-decoration:none;width:200px;-webkit-text-size-adjust:none;">
        Get Started
      </a>
      <!--[if mso]>
        </center>
      </v:roundrect>
      <![endif]-->
    </td>
  </tr>
</table>

What's happening here? This is the infamous "bulletproof button" pattern. The <a> tag works for most clients, but Outlook's Word-based rendering engine needs VML (Vector Markup Language) to display rounded corners and background colors properly. Maily generates this dual-structure automatically—you never touch this code.

Example 2: Variable Injection with Fallbacks

Maily's Variables component handles dynamic content with proper escaping. Conceptually, the implementation ensures:

// Pseudo-code representing Maily's variable processing
function processVariable(variableName, fallbackValue, userData) {
  // Step 1: Retrieve value from data context
  const rawValue = userData[variableName];
  
  // Step 2: Apply fallback if undefined/null/empty
  const safeValue = rawValue || fallbackValue || '';
  
  // Step 3: HTML-escape to prevent rendering breaks and XSS
  const escapedValue = escapeHtmlEntities(safeValue);
  
  // Step 4: Wrap in email-safe span for styling consistency
  return `<span class="maily-variable" data-var="${variableName}">${escapedValue}</span>`;
}

// Usage in template context:
// {{firstName|Friend}} → renders user name or "Friend" if unavailable

Why this matters: Raw template engines often inject unescaped values, breaking your email layout when someone named O'Brien signs up, or worse, creating security vulnerabilities. Maily's componentized approach enforces safety by default.

Example 3: Conditional Display (Show If Component)

The Show If Condition component generates client-compatible conditional display. Here's how this translates across different email clients:

<!-- Maily's Show If output for "show when plan === 'premium'" -->
<!-- Modern clients: CSS display control -->
<div class="maily-show-if" data-condition="plan:eq:premium" 
     style="display: none; max-height: 0; overflow: hidden; mso-hide: all;">
  
  <!-- Content only visible to premium users -->
  <table role="presentation" width="100%">
    <tr>
      <td style="padding: 20px; background: #f0f9ff; border-left: 4px solid #0ea5e9;">
        <p style="margin: 0; color: #0369a1; font-weight: 600;">
          🎉 Premium Feature: Advanced analytics now available!
        </p>
      </td>
    </tr>
  </table>

</div>

<!-- Inline script for pre-send processing (stripped by most clients, harmless) -->
<script type="application/maily-conditional">
  {"condition": {"field": "plan", "operator": "eq", "value": "premium"}}
</script>

The technical insight: Email clients strip <script> tags, so Maily uses them for metadata transport during editing, then processes conditions at send-time through your backend integration. The mso-hide: all and max-height: 0 combination hides content in Outlook while display: none handles modern clients—dual coverage for maximum compatibility.

Example 4: Responsive Column Layout

Maily's Columns component generates the fluid hybrid pattern:

<!-- Two-column layout that stacks on mobile -->
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>
      <!--[if mso]>
      <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td valign="top" width="300">
      <![endif]-->
      
      <!-- Column 1: Fluid width with max constraint -->
      <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
        <table role="presentation" width="100%">
          <tr>
            <td style="padding: 10px;">
              <!-- Column 1 content -->
            </td>
          </tr>
        </table>
      </div>
      
      <!--[if mso]></td><td valign="top" width="300"><![endif]-->
      
      <!-- Column 2: Same pattern, will stack naturally -->
      <div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
        <table role="presentation" width="100%">
          <tr>
            <td style="padding: 10px;">
              <!-- Column 2 content -->
            </td>
          </tr>
        </table>
      </div>
      
      <!--[if mso]></td></tr></table><![endif]-->
    </td>
  </tr>
</table>

The magic: display: inline-block with max-width creates natural stacking when viewport is too narrow, while the MSO-conditional table forces side-by-side layout in Outlook. This "fluid hybrid" approach, pioneered by email developers years ago, is baked into every Maily column.

Advanced Usage & Best Practices

Custom Component Development

Since Maily is open-source, you can extend its component library. Study the existing component patterns—particularly how they separate editor UI from email HTML output. The editor uses modern web tech (likely React-based), while output generation focuses on table-based email structures.

Integration with Transactional Email Services

Maily produces HTML—you're not locked into any sender. Pipe output to:

• SendGrid/Mailgun/Postmark via API
• AWS^{↗ Bright Coding Blog} SES for cost-effective scale
• Novu (a sponsor) for notification orchestration

Version Control for Email Templates

Export Maily templates as JSON or HTML and commit to git. This enables code review for email changes—something impossible with pure SaaS builders.

Deliverability Optimization

Maily's clean output helps, but always:

• Run through Litmus or Email on Acid for final testing
• Keep image-to-text ratio balanced
• Use the Spacer component instead of <br> chains for consistent spacing

Comparison with Alternatives: Why Maily.to Wins

The verdict: Maily.to occupies the sweet spot for technical teams that need visual editing capabilities without sacrificing output quality or vendor independence. It's more structured than raw HTML (protecting you from yourself), more email-focused than generic builders, and more accessible than pure code solutions.

FAQ: Your Maily.to Questions Answered

Is Maily.to completely free to use?

Yes! The core editor is MIT licensed and free to use, modify, and self-host. The hosted version at maily.to may have future premium tiers, but the open-source codebase is yours forever.

Does Maily.to handle sending emails, or just creation?

Maily.to is editor-only—it generates the HTML you send through your preferred provider (SendGrid, AWS SES, etc.). This is actually a feature: you keep deliverability control and avoid vendor lock-in.

How does Maily.to compare to React Email?

React Email is a code-first library for developers comfortable with JSX. Maily.to provides a visual interface with the same email-optimized output philosophy. They're complementary—some teams use React Email for developer-controlled templates and Maily for marketer-managed campaigns.

Can I use Maily.to components in my existing design system?

Absolutely. The component architecture is designed for extensibility. Study the source to understand how editor UI maps to email output, then create components matching your brand specifications.

Is the output really tested across all email clients?

The components are built using established email coding patterns (fluid hybrid, bulletproof buttons, etc.) that are known to work across the client spectrum. However, always run final templates through dedicated testing services for critical campaigns.

What about dynamic content and personalization?

The Variables and Show If Condition components handle basic personalization. For complex logic, process data before passing to Maily, or use the exported HTML as a template for your server-side rendering engine.

How active is development?

With Novu as a Gold sponsor and consistent community contributions, the project shows strong momentum. Check the GitHub repository for recent commit activity.

Conclusion: Your Email Sanity Starts Here

I've watched too many talented developers lose afternoons to Outlook's rendering quirks. I've seen startups delay product launches because their "simple" welcome email broke in Gmail's dark mode. Email is too important to leave to chance—and too painful to build from scratch every time.

Maily.to represents a smarter path forward: opinionated enough to protect you from email's worst pitfalls, flexible enough for real-world use cases, and open enough to trust with your infrastructure. The component architecture isn't limiting—it's liberating. You stop worrying about whether your button will render and start focusing on what your button should do.

The fact that established players like Novu are sponsoring its development tells you something: this isn't a toy project. It's infrastructure that serious teams are betting on.

My recommendation? Stop writing email HTML by hand. Stop hoping your generic page builder's "export to email" feature works. Head to maily.to/playground and experience what email editing should have been all along. Or clone the repository, run pnpm dev, and make it yours.

Your future self—the one not debugging Outlook at 11 PM—will thank you.

Star the repo. Try the playground. Escape email hell.

→ github.com/arikchakma/maily.to