Skip to main content

​
What is Better Svelte Email?

Better Svelte Email is a powerful library for building email templates using Svelte components with first-class Tailwind CSS support. Write emails the way you write modern web apps, and let Better Svelte Email handle the conversion to email-safe HTML.

Tailwind v4 Support

Write Tailwind classes, get inline styles automatically. Supports all v4 utilities, custom classes, and responsive breakpoints.

Visual Email Preview

Develop and test your emails with a built-in preview component that shows exactly how your emails will look.

TypeScript First

Fully typed with comprehensive type definitions. Get autocomplete and type safety out of the box.

Battle-Tested

Over 90% test coverage with extensive unit and integration tests. Production-ready and reliable.

​
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
Better Svelte Email is a complete rewrite inspired by React Email, providing the rock-solid foundation your email infrastructure needs. It brings the simplicity, reliability, and feature richness of React Email to the Svelte ecosystem.

​
Key Features

​
Complete Tailwind Support

Better Svelte Email transforms Tailwind classes into inline styles that work across all email clients:
  • All Tailwind v4 utilities
  • Custom Tailwind classes (bg-[#fff], my:[40px])
  • Dynamic Tailwind classes (class={someVar})
  • Responsive breakpoints (sm:, md:, lg:, xl:, 2xl:)
  • Custom Tailwind configurations
  • Custom CSS injection for app theme integration

​
Email-Safe HTML

Automatically converts your Svelte components to HTML that works reliably across all major email clients:
  • Inline styles for maximum compatibility
  • Media queries injected into <head> for responsive design
  • XHTML 1.0 Transitional DOCTYPE
  • Table-based layouts with accessible markup

​
Rich Component Library

Pre-built components with sensible defaults for building email layouts: 
import {
  Html, Head, Body, Preview,
  Container, Section, Row, Column,
  Heading, Text, Button, Link,
  Img, Hr
} from 'better-svelte-email';
All components forward regular HTML attributes, merge inline styles, and include props tuned for email-friendly rendering.

​
Plain Text Generation

Generate plain text versions of your emails automatically for better deliverability and accessibility: 
import { toPlainText } from 'better-svelte-email/render';

const plainText = toPlainText(html);

​
Requirements

Better Svelte Email requires:
  • Svelte >= v5.14.3
  • Tailwind CSS >= v4 (optional, but recommended)
For older Svelte versions, you can use svelte-email-tailwind.

​
Quick Example

Here’s a simple welcome email to give you a taste of what’s possible: 
<script>
  import {
    Html, Head, Body, Preview,
    Container, Section, Text, Button
  } from 'better-svelte-email';

  let { name = 'there' } = $props();
</script>

<Html>
  <Head />
  <Body class="bg-zinc-100">
    <Preview preview="Welcome to our platform" />
    <Container class="m-8 mx-auto max-w-lg rounded-2xl bg-white p-8">
      <Section class="mx-auto text-center">
        <Text class="text-2xl font-bold text-zinc-900">
          Welcome {name}!
        </Text>
        <Text class="mt-3 text-zinc-600">
          Thanks for joining us. We're excited to have you on board.
        </Text>
        <Button
          href="https://example.com/get-started"
          pX={24}
          pY={14}
          class="mt-6 rounded-lg bg-orange-600 text-white"
        >
          Get Started
        </Button>
      </Section>
    </Container>
  </Body>
</Html>

​
Get Started

Ready to build beautiful emails? Follow our quickstart guide:

Quickstart Guide

Get your first email up and running in under 5 minutes.

​
Community and Support

GitHub

Star the project, report issues, and contribute.

Documentation

Explore the complete component library and API reference.

​
Acknowledgements

Better Svelte Email is built by Konixy. Many components and patterns were inspired by svelte-email-tailwind and React Email. Special thanks to the authors and contributors of these excellent projects.

Build docs developers (and LLMs) love

Get started for freeTalk to us