Better Svelte Email

Create beautiful emails in Svelte with first-class Tailwind support

Website · GitHub

Usage

See the documentation for a complete guide on how to use Better Svelte Email.

Features

• Tailwind v4 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

See Roadmap for future features and planned improvements.

Why?

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 of svelte-email-tailwind 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.

Minimum Svelte Version

The minimum supported Svelte version is 5.14.3. For older versions, you can use svelte-email-tailwind.

Supported Features

✅ Supported

• All tailwindcss v4 utilities
• Custom Tailwind classes (bg-[#fff], my:[40px], ...)
• Dynamic Tailwind classes (class={someVar})
• Responsive breakpoints (sm:, md:, lg:, xl:, 2xl:)
• HTML elements and Svelte components
• Nested components
• All svelte features such as each blocks ({#each}) and if blocks ({#if}), and more
• Custom Tailwind configurations

Author

Anatole Dufour (@Konixy)

Author of svelte-email-tailwind

Steven Polak (@steveninety)

Authors of react-email

Bu Kinoshita (@bukinoshita)

Zeno Rocha (@zenorocha)

Development

Running Tests

bun run test

All tests must pass before pushing to main. The CI/CD pipeline will automatically run tests on every push and pull request.

Building

bun run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

To do so, you'll need to:

1. Fork the repository
2. Create a feature branch (git checkout -b feat/amazing-feature)
3. Make your changes
4. Run tests (bun run test)
5. Commit your changes using conventional commits:
   • feat: - New features
   • fix: - Bug fixes
   • docs: - Documentation changes
   • test: - Test additions/changes
   • chore: - Maintenance tasks
6. Push to your branch (git push origin feat/amazing-feature)
7. Open a Pull Request

Acknowledgements

Many components and logic were inspired by or adapted from svelte-email-tailwind and react-email. Huge thanks to the authors and contributors of these projects for their excellent work.