The next generation of
writing emails in Phoenix.

Build beautiful, responsive emails using HEEx components and Tailwind. A direct port of react-email, engineered for the Elixir ecosystem.

Get Started View on GitHub

welcome.ex preview

1def welcome(assigns) do

2 ~H"""

3 <.email>

4 <.head>

5 <.font

6 font_family="Inter"

7 fallback_font_family="Helvetica, Arial, sans-serif"

8 web_font={inter_regular()}

9 />

10 <.font

11 font_family="Inter"

12 font_weight={600}

13 fallback_font_family="Helvetica, Arial, sans-serif"

14 web_font={inter_semibold()}

15 />

16 </.head>

17 <.preview>You're in — let's get you set up</.preview>

18 <.body class="bg-zinc-100">

19 <.container class="mx-auto max-w-xl overflow-hidden rounded-xl bg-white">

20 <.section

21 class="p-10 text-center"

22 style="background:linear-gradient(135deg,#4f46e5,#7c3aed)"

23 >

24 <.icon_badge bg="rgba(255,255,255,0.18)" size={64} icon_size={28}>

25 <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />

26 <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />

27 </.icon_badge>

28 </.section>

29 <.section class="p-8">

30 <.heading as="h1" class="text-2xl font-bold tracking-tight text-zinc-900">

31 Hello {@name} 👋

32 </.heading>

33 <.text class="text-base leading-relaxed text-zinc-600">

34 Thanks for signing up. We're excited to have you — click below to finish setting up your account.

35 </.text>

36 <.button

37 href={@url}

38 class="mt-6 rounded-lg bg-indigo-600 px-6 py-3 font-semibold text-white"

39 >

40 Get started

41 </.button>

42 <.text class="mt-4 text-xs text-zinc-400">

43 Or paste this link into your browser: {@url}

44 </.text>

45 <.hr class="my-6 border-zinc-100" />

46 <.text class="text-xs text-zinc-400">

47 You're receiving this email because you signed up for Acme.

48 </.text>

49 </.section>

50 </.container>

51 </.body>

52 </.email>

53 """

54end

THE PROBLEM

Stop fighting with HTML tables.

Every mail client renders HTML differently. Outlook uses Word's rendering engine, Gmail strips your <style> tags, and Apple Mail plays by its own rules. Building anything that survives all three usually means table-based layouts, inline styles, and a lot of guesswork.

Nested tables for every layout
Conditional comments for Outlook
All styles must be inlined
No component reuse

THE SOLUTION

Phoenix Email fixes this.

Phoenix Email compiles familiar HEEx components down to the table-based, inlined-style markup mail clients actually need — so you write modern markup and it ships compatible HTML.

HEEx components you already know
Automatic cross-client compatibility
Full Tailwind support
Zero-config XHTML output

Gmail Outlook Apple Mail Yahoo HEY

FEATURES

Everything you need to write better emails.

Components

Ready-to-use Primitives

No more guessing game. use PhoenixEmail automatically imports proven components like <.container>, <.button>, <.heading>, and <.text>. Focus on your message, not the quirks of email clients.

Templating

Full HEEx Power

Leverage the exact same templating engine you use for your LiveViews. Pass assigns, use comprehensions, and write standard HEEx syntax ({@name}) to create highly dynamic and personalized emails.

Rendering

Painless Rendering

Transform your components into email-ready HTML or plain text with a single function call. Phoenix Email automatically handles the XHTML 1.0 Transitional doctype required by major mail clients.

20+

Primitives

Mail Clients

100%

HEEx Compatible

MIT

License

GET STARTED

Ready to upgrade your email workflow?

Install the package and start building better emails in minutes.

mix.exs

{:phoenix_email, "~> 0.1.2"}

Documentation (HexDocs) GitHub Repository Report an Issue

The next generation of writing emails in Phoenix.