Skip to main content

​
Prerequisites

Before installing Better Svelte Email, ensure you have:
  • Svelte >= v5.14.3
  • Node.js >= 18 (recommended)
  • A Svelte or SvelteKit project set up
Better Svelte Email requires Svelte 5.14.3 or higher. For older versions of Svelte, use svelte-email-tailwind instead.

​
Install the Package

Install Better Svelte Email using your preferred package manager: 
npm install better-svelte-email

​
Optional Dependencies

Better Svelte Email has several optional dependencies that enable additional features:

​
Email Preview Component

For the built-in email preview component: 
npm install --save-dev shiki

​
Sending Emails with Resend

If you’re using Resend to send emails: 
npm install resend

​
Code Formatting

For prettier HTML output: 
npm install --save-dev prettier

​
Tailwind CSS Setup

While Better Svelte Email works without Tailwind CSS, you’ll get the best experience using Tailwind v4.

​
Install Tailwind CSS v4

npm install --save-dev tailwindcss @tailwindcss/vite

​
Configure Tailwind (Optional)

Better Svelte Email automatically processes Tailwind classes. No additional configuration is required unless you want to use custom Tailwind settings in your emails.
You can pass your app’s CSS file (with Tailwind config and custom variables) to the Renderer for consistent styling between your app and emails. See the Custom Tailwind Config guide for details.

​
Peer Dependencies

Better Svelte Email requires these peer dependencies (likely already installed in your project):
  • svelte >= 5.14.3
  • @sveltejs/kit >= 2 (optional, only needed if using SvelteKit features)

​
Verify Installation

Verify your installation by creating a simple test email: 
<script>
  import { Html, Head, Body, Text } from 'better-svelte-email';
</script>

<Html>
  <Head />
  <Body>
    <Text>Hello from Better Svelte Email!</Text>
  </Body>
</Html>
Then render it: 
import Renderer from 'better-svelte-email/render';
import TestEmail from '$lib/emails/test.svelte';

const { render } = new Renderer();
const html = await render(TestEmail);

console.log(html);
If the installation was successful, you should see rendered HTML output.

​
TypeScript Support

Better Svelte Email is written in TypeScript and includes comprehensive type definitions out of the box. No additional setup is required. All components and APIs are fully typed: 
import Renderer, { type RenderOptions, type RendererOptions } from 'better-svelte-email/render';
import type { TailwindConfig } from 'better-svelte-email/render';

// Full type safety and autocomplete
const renderer = new Renderer({
  tailwindConfig: {
    theme: {
      extend: {
        colors: {
          brand: '#FF3E00'
        }
      }
    }
  }
});

​
Package Exports

Better Svelte Email provides several entry points for different use cases:

​
Main Package

import { Html, Head, Body, /* ... */ } from 'better-svelte-email';
// or
import { Html, Head, Body } from 'better-svelte-email/components';

​
Individual Components

import Button from 'better-svelte-email/components/Button.svelte';
import Text from 'better-svelte-email/components/Text.svelte';

​
Renderer

import Renderer, { toPlainText } from 'better-svelte-email/render';

​
Email Preview

import EmailPreview from 'better-svelte-email/preview/EmailPreview.svelte';
import { createEmailInfo } from 'better-svelte-email/preview';

​
Utilities

import { styleToString, pxToPt, combineStyles } from 'better-svelte-email/utils';

​
Next Steps

Now that you have Better Svelte Email installed, you’re ready to create your first email:

Quickstart

Build your first email in under 5 minutes.

Components

Explore the complete component library.

Renderer API

Learn how to render emails to HTML.

Email Preview

Set up visual email previews in development.

Build docs developers (and LLMs) love

Get started for freeTalk to us