Svelty-Email

0.1.1 · active · verified Tue Apr 21

Svelty-Email is a community-maintained fork of the svelte-email library, designed to facilitate the creation and rendering of email templates using Svelte. Inspired by React-Email, it allows developers to build responsive, component-based email layouts in a familiar Svelte environment, abstracting away the complexities of traditional HTML email development, such as table-based structures. The current stable version is 0.1.1, with a primary focus on adapting to Svelte's evolving ecosystem, including ongoing work for Svelte 5 support. Its key differentiator is enabling a modern Svelte development workflow for email templating, integrating seamlessly with SvelteKit projects and rendering emails to robust HTML or plain text suitable for various email service providers like Nodemailer. This project aims to keep the original library's vision alive and updated.

Common errors

```
Error: A Svelte 5 component was passed to a Svelte 4 compatible function/utility.
```
cause Attempting to use `svelty-email` versions 0.1.x (designed for Svelte 5) with a Svelte 4-based SvelteKit project.

fix For Svelte 4 projects, downgrade `svelty-email` to version `0.0.11` (`npm install svelty-email@0.0.11`). For Svelte 5 projects, ensure your SvelteKit setup is fully updated to Svelte 5 and use the latest `svelty-email`.
```
Module not found: Error: Can't resolve 'svelty-email'
```
cause The `svelty-email` package has not been installed, or there's a typo in the import path.

fix Ensure the package is installed by running `npm install svelty-email` or `pnpm install svelty-email` in your project's root directory.
```
Error: Cannot find module 'nodemailer' from 'your-project-path'
```
cause The `nodemailer` package, used for sending emails, is an external dependency and is not automatically installed with `svelty-email`.

fix Install `nodemailer` separately using your package manager: `npm install nodemailer` or `pnpm install nodemailer`.

Warnings

breaking Version 0.1.x introduces breaking changes for Svelte 5 support. Applications built with Svelte 4 should explicitly use version 0.0.11 to maintain compatibility.
Fix: For Svelte 4 projects: `npm install svelty-email@0.0.11`. For Svelte 5 projects: ensure your SvelteKit setup is compatible with Svelte 5 and install `svelty-email@latest`.
gotcha The official documentation linked from the README (svelte-email.vercel.app) refers to the previous, unmaintained `svelte-email` project. While examples are useful, ensure you substitute `svelty-email` for `svelte-email` in imports and package names.
Fix: Always use `svelty-email` in your project's `package.json` and `import` statements. Adapt examples from the old documentation by replacing the package name.
gotcha The `Section` component should not be used as a root element in your email templates, as doing so can potentially break styling and layout in various email clients.
Fix: Always wrap your email content, including `Section` components, within the `Html` component, which should typically be the root element of your email template.
gotcha Some advanced examples, like the Airbnb REPL, might have outdated formatting or broken assets (e.g., logos) due to being based on older documentation or resource links.
Fix: Use advanced examples as a conceptual guide but be prepared to update asset paths, styling, and potentially component usage to align with the latest `svelty-email` version and your project's structure.

Install

npm install svelty-email npm
yarn add svelty-email yarn
pnpm add svelty-email pnpm

Imports

render
wrong:
```
const { render } = require('svelty-email');
```
correct:
```
import { render } from 'svelty-email';
```
The `render` function is a named export for server-side email rendering, primarily used in SvelteKit server routes.
Html, Text, Button
wrong:
```
import Html from 'svelty-email/Html.svelte';
```
correct:
```
import { Html, Text, Button } from 'svelty-email';
```
Core Svelte components like Html, Text, and Button are named exports from the main package entry point for use within your Svelte email templates.
Email Components (e.g., Column, Section)
wrong:
```
import { Column, Section } from 'svelty-email/components';
```
correct:
```
import { Column, Section } from 'svelty-email';
```
All provided email components are re-exported directly from the root `svelty-email` package, simplifying import paths.

Quickstart

This quickstart demonstrates how to define a basic email template using Svelte components provided by svelty-email and then render it to HTML for sending via Nodemailer in a SvelteKit context.

import { render } from 'svelty-email';
import Hello from '$lib/emails/Hello.svelte';
import nodemailer from 'nodemailer';

// src/$lib/emails/Hello.svelte
// <script>
// 	import { Button, Hr, Html, Text } from 'svelty-email';
// 	export let name = 'World';
// </script>
// <Html lang="en">
// 	<Text>
// 		Hello, {name}!
// 	</Text>
// 	<Hr />
// 	<Button href="https://svelte.dev">Visit Svelte</Button>
// </Html>

const transporter = nodemailer.createTransport({
	host: process.env.SMTP_HOST ?? 'smtp.ethereal.email',
	port: parseInt(process.env.SMTP_PORT ?? '587', 10),
	secure: process.env.SMTP_SECURE === 'true',
	auth: {
		user: process.env.SMTP_USER ?? 'my_user',
		pass: process.env.SMTP_PASSWORD ?? 'my_password'
	}
});

const emailHtml = render({
	template: Hello,
	props: {
		name: 'Svelte'
	}
});

const options = {
	from: 'you@example.com',
	to: 'user@gmail.com',
	subject: 'hello world',
	html: emailHtml
};

transporter.sendMail(options)
	.then(() => console.log('Email sent successfully!'))
	.catch(error => console.error('Failed to send email:', error));

// Example of usage in a SvelteKit server route (e.g., src/routes/send-email/+server.js)
// export async function POST() {
//   // ... (email sending logic as above)
//   return new Response('Email sent', { status: 200 });
// }

view raw JSON →