svelte-emails

Think Tailwind for emails.
Build responsive, bulletproof HTML emails with Svelte components and familiar styling.

📚 Documentation  •  🚀 Quick Start  •  🤔 Why?

Why svelte-emails?

HTML email is stuck in the 1990s. Tables for layout. Inline styles everywhere. Outlook breaking everything.

svelte-emails handles the chaos so you don't have to:

• Write modern Svelte components with Tailwind-like styling
• We compile to bulletproof nested tables, VML, and inline styles
• Works everywhere: Gmail, Outlook, Apple Mail, Yahoo, and beyond

<script lang="ts">
  import { Email, Div, Text, Button } from 'svelte-emails'
</script>

<Email preview="Welcome to our platform!">
  <Div p-8 bg-[#f3f4f6]>
    <Text.H1 content="Welcome, **[[first_name]]**! 👋" />
    <Text content="We're thrilled to have you on board." />
    <Button href="https://example.com" bg-[#3b82f6] text-[#fff] rounded px-6 py-3 content="Get Started →" />
  </Div>
</Email>

That's it. No <table> nightmares. No inline style="" spaghetti. Just clean, readable code.

Quick Start

Installation

bun add -D svelte-emails
# or: npm install -D svelte-emails

Create your first email

Create a file named Welcome.email.svelte:

<script lang="ts">
  import { Email, Div, Text } from 'svelte-emails'
</script>

<Email preview="Welcome!">
  <Div p-6 bg-[#ffffff]>
    <Text.H1 content="Hello World" />
    <Text content="This is my first email." />
  </Div>
</Email>

Preview it

bunx svelte-emails
# or: npx svelte-emails

That's it! Open the URL and see your email rendered live with hot reload.

Send it

import { render } from 'svelte-emails'
import WelcomeEmail from './Welcome.email.svelte'

const { html, text, headers } = await render(WelcomeEmail, {
  placeholders: { first_name: 'Alice' }
})

// Send with any provider: Resend, SendGrid, Nodemailer, AWS SES...
await emailProvider.send({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Welcome!',
  html,
  text,
  headers
})

Not convinced yet?
📚 See the documentation — built entirely on the foundation of the library itself.

Share Your Designs!

Built something beautiful? We want to see it!

Contribute your email templates to packages/cli/src/examples and inspire the community. Your designs will be featured in the Studio's example gallery for everyone to learn from.

Open a PR →

License

MIT © Refzlund