[!WARNING] Breaking change made for Svelte 5 support will lib is being re-written. Please use
0.0.11for Svelte 4 apps.
[!NOTE] After seeing react-email Carsten decided to create a similar library for Svelte.
svelte-emailenables you to write and design email templates with svelte and render them to HTML or plain text. This is a community maintained fork to keep the project going as svelte continues to evolve undersvelty-email.
Install the package to your existing SvelteKit project:
npm install svelty-emailpnpm install svelty-emailsrc/$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>This example uses Nodemailer to send the email. You can use any other email service provider.
src/routes/emails/hello/+server.js
import { render } from 'svelty-email';
import Hello from '$lib/emails/Hello.svelte';
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
secure: false,
auth: {
user: 'my_user',
pass: '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);[!CAUTION] Update: fix broken Airbnb example formatting in old docs, broken logos
[!WARNING] Documentation page is from previous project,
svelte-emailwill need to be replaced withsvelty-emailbut examples are great.
For more information, please visit the documentation.
A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.
- HTML
- Head
- Heading
- Button
- Link
- Image
- Divider
- Paragraph
- Container
- Preview
- Body
- Column
- Section -- Please do not use as 'root' element, can break styling
Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:
- Chris Joseph
Previous Author svelte-email
- Carsten Lebek (@carstenlebek)
Authors of the original project react-email
- Bu Kinoshita (@bukinoshita)
- Zeno Rocha (@zenorocha)