Email is one of the most widely used forms of communication in the modern world, but developing them can be a real pain in the ass. Whether it's formatting issues, limited design options, or simply struggling to come up with compelling content, the process of creating an effective email can be frustrating and time-consuming.
React Email has made the experience a lot better, so I've decided to build something similar for Svelte.
With Svelte Email you can start building, designing and sending emails in your SvelteKit project in literally three easy steps.
Step 1: Installation
Install the package to your existing SvelteKit project:
npm install svelte-email
pnpm add svelte-email
Step 2: Create an email template using Svelte
src/$lib/emails/Hello.svelte
<script>
import { Button, Hr, Html, Text } from 'svelte-email';
export let name = 'World';
</script>
<Html lang="en">
<Text>
Hello, {name}!
</Text>
<Hr />
<Button href="https://svelte.dev">Visit Svelte</Button>
</Html>
Step 3: Send an email
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 'svelte-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({
component: Hello,
props: {
name: 'Svelte'
}
});
const options = {
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: emailHtml
};
transporter.sendMail(options);
Congratulations 🎉 You have just sent an email from a server route in your SvelteKit project, without ever having to touch the HTML of the email.
Sending emails arguably can't get easier than this.
Check out the docs for Svelte Email and start building emails with ease! Documentation
Top comments (2)
Thank you for sharing, i found out that the example is outdated.
Instead of component: Hello, you should use template: Hello.
New Version