Building Emailens AI: An AI Email Builder Tested Across 21 Email Clients

Today

Generating HTML emails with AI models like Claude or ChatGPT has always had a fundamental flaw: LLMs write modern web HTML (flexbox, CSS grid, custom properties) that instantly breaks in Outlook, Gmail, and Yahoo Mail.

An email template might look flawless in an AI chat preview, but when sent to subscribers, Outlook strips background images, Gmail ignores <style> tags, and mobile clients distort unconstrained images.

To solve this, I built the Emailens AI Email Builder (emailens.dev/build). It combines natural language AI generation with our open-source @emailens/engine cross-client rendering rules to generate bulletproof HTML emails pre-verified across 21 email clients.

The Architectural Challenge: Merging AI Generation with Client Restrictions

Traditional AI email generators treat HTML generation as plain text completion. Emailens takes a structured, engine-first approach:

[User Prompt] ──> [LLM Copilot Agent] ──> [React Email / MJML AST]
                                                   │
                                                   ▼
[Exportable Code] <── [21-Client QA Matrix] <── [@emailens/engine]
(React Email/HTML)    (CSS Analysis & Fixes)   (Transform & Sanitize)

By placing @emailens/engine directly inside the AI generation loop, every section generated by the AI copilot is immediately evaluated against 250+ CSS property rules covering 95%+ of real-world email client opens.

Core Features & Subsystems

1. Natural Language Brief to Bulletproof Code

Developers or marketers can type prompt briefs like "Create a product launch announcement for a SaaS app with a warm editorial dark theme, CTA button, and feature grid".

The builder streams a structured React Email or MJML composition while applying email-safe structural fallbacks (ghost tables for Outlook, inline CSS for Gmail).

2. Live 21-Client Compatibility Auditing

As the AI generates code, Emailens automatically:

  • Analyzes custom CSS for compatibility warnings.
  • Suggests or applies framework-native fixes (e.g. converting gap: 16px into spacing tables or explicit padding).
  • Runs automated spam deliverability checks and link validation.

3. Taste Directives & Design Guardrails

AI models often default to generic, uninspired email layouts. The Emailens AI Builder incorporates Taste Directives — curated design systems, typography hierarchies, and color palettes that prevent generic AI aesthetic defaults and keep emails looking premium.

4. Image Normalization & Stock Integration

Unsized images are the #1 cause of broken email layouts on mobile. The builder integrates an image normalization pipeline (builder-stock-images, image-normalize) that:

  • Automatically clamps image dimensions to email container bounds.
  • Injects explicit HTML width and height attributes to prevent Outlook layout collapse.
  • Hosts assets on Cloudflare R2 for reliable delivery.

5. Multi-Framework Export Options

Once an email is built, developers can export the result directly into their codebase as:

  • React Email (.tsx)
  • MJML (.mjml)
  • Raw Inline HTML (.html)

Tech Stack

  • Frontend Application: Next.js 16 (App Router), React 19, Tailwind CSS v4, Shadcn UI
  • AI & Copilot Runtime: Anthropic Claude 3.7 SDK, Vercel AI SDK
  • Email Engine: @emailens/engine (open-source core engine)
  • Database & Auth: Supabase PostgreSQL with Drizzle ORM, Better Auth
  • Asset Pipeline: Playwright, Browserless, Cloudflare R2

Try out the AI Email Builder live at emailens.dev/build!

LinkedIn
X