better-svelte-email

Create beautiful emails in Svelte with first-class Tailwind support.

Purpose

Better Svelte Email is a complete rewrite built on Svelte's official preprocessor API, providing a rock-solid foundation for email infrastructure. It brings the simplicity, reliability, and feature richness of React Email to the Svelte ecosystem.

Why Better Svelte Email?

Existing Svelte email solutions have significant limitations:

• svelte-email hasn't been updated in over 2 years
• svelte-email-tailwind suffers from stability issues and maintaining it is not sustainable anymore

Key Features

• Stable & Future-Proof - Uses Svelte's public preprocessor API
• Tailwind CSS Support - Transforms Tailwind classes to inline styles for email clients
• Built-in Email Preview - Visual email preview and test sending
• TypeScript First - Fully typed with comprehensive type definitions
• Well Tested - Extensive test coverage with unit and integration tests

Built-in Email Preview Component

Better Svelte Email includes a built-in preview component for visually developing and testing email templates during development:

• HTML Source View - Inspect the generated HTML with syntax highlighting
• Copy to Clipboard - Quickly copy the rendered HTML
• Test Email Sending - Send test emails directly from the preview UI using Resend
• Template List - Browse all your email templates in one place

Supported Features

✅ Supported

• Static Tailwind classes
• Custom Tailwind classes (bg-[#fff], my:[40px], ...)
• All standard Tailwind (v3) utilities (colors, spacing, typography, etc.)
• Responsive breakpoints (sm:, md:, lg:, xl:, 2xl:)
• HTML elements and Svelte components
• Nested components
• Conditional blocks ({#if})
• Each blocks ({#each})
• Custom Tailwind configurations

❌ Not Supported (Yet)

• Tailwind v4
• CSS Object (style={{ color: 'red' }})
• Dynamic class expressions (class={someVar})
• Arbitrary values in responsive classes (sm:[color:red])
• Container queries