Create beautiful emails in Svelte with first-class Tailwind support
See Roadmap for future features and planned improvements.
Existing Svelte email solutions have significant limitations:
Better Svelte Email is a complete rewrite built on Svelte's official preprocessor API, providing the rock-solid foundation your email infrastructure needs. It brings the simplicity, reliability, and feature richness of React Email to the Svelte ecosystem.
npm i -D better-svelte-email
# or
bun add -D better-svelte-email
# or
pnpm add -D better-svelte-email
Add the preprocessor to your svelte.config.js:
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { betterSvelteEmailPreprocessor } from 'better-svelte-email';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [vitePreprocess(), betterSvelteEmailPreprocessor()],
kit: {
adapter: adapter()
}
};
export default config;
Create your email templates in src/lib/emails/:
<!-- src/lib/emails/welcome.svelte -->
<script>
import { Html, Head, Body, Preview, Container, Text, Button } from 'better-svelte-email';
let { name = 'User' } = $props();
</script>
<Html>
<Head />
<Body class="bg-gray-100">
<Preview preview="Welcome Email" />
<Container class="mx-auto p-8">
<Text class="mb-4 text-2xl font-bold">
Welcome, {name}!
</Text>
<Button
href="https://example.com"
class="rounded bg-orange-600 px-6 py-3 text-white sm:text-sm"
>
Get Started
</Button>
</Container>
</Body>
</Html>
// src/routes/api/send-email/+server.ts
import { render } from 'svelte/server';
import WelcomeEmail from '$lib/emails/welcome.svelte';
export async function POST({ request }) {
const { name, email } = await request.json();
// Render email (preprocessor already ran at build time!)
const result = render(WelcomeEmail, { props: { name } });
// Send email using your preferred service (Resend, SendGrid, etc.)
// await resend.emails.send({
// from: '[email protected]',
// to: email,
// subject: 'Welcome!',
// html: result.body
// });
return new Response('Sent');
}
Better Svelte Email includes a built-in preview component for visually developing and testing your email templates during development.
Create a preview route in your SvelteKit app:
<!-- src/routes/preview/+page.svelte -->
<script lang="ts">
import { EmailPreview } from 'better-svelte-email/preview';
let { data } = $props();
</script>
<EmailPreview emailList={data.emails} />
// src/routes/preview/+page.server.ts
import { emailList, createEmail, sendEmail } from 'better-svelte-email/preview';
import { env } from '$env/dynamic/private';
export function load() {
const emails = emailList({
path: '/src/lib/emails' // optional, defaults to '/src/lib/emails'
});
return { emails };
}
export const actions = {
...createEmail,
...sendEmail({ resendApiKey: env.RESEND_API_KEY })
};
To enable test email sending, add your Resend API key to your .env file:
RESEND_API_KEY=re_your_api_key_here
Get your API key from Resend.
If you prefer to use a different email provider, you can pass a custom send function:
export const actions = {
...createEmail,
...sendEmail({
customSendEmailFunction: async ({ from, to, subject, html }) => {
// Use your preferred email service (SendGrid, Mailgun, etc.)
try {
await yourEmailService.send({ from, to, subject, html });
return { success: true };
} catch (error) {
return { success: false, error };
}
}
})
};
Here are the available options:
betterSvelteEmailPreprocessor({
pathToEmailFolder: '/src/lib/emails',
debug: false,
tailwindConfig: {
theme: {
extend: {
colors: {
brand: '#FF3E00'
}
}
}
}
});
The minimum supported Svelte version is 5.14.3.
For older versions, you can use svelte-email-tailwind.
bg-[#fff], my:[40px], ...)sm:, md:, lg:, xl:, 2xl:){#if}){#each})style={{ color: 'red' }})class={someVar})sm:[color:red])Anatole Dufour (@Konixy)
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.
bun run build
Contributions are welcome! Please feel free to submit a Pull Request.
To do so, you'll need to:
git checkout -b feat/amazing-feature)bun run test)feat: - New featuresfix: - Bug fixesdocs: - Documentation changestest: - Test additions/changeschore: - Maintenance tasksgit push origin feat/amazing-feature)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.