Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carstenlebek/svelte-email
Write and send emails with Svelte ✉️🚀
https://github.com/carstenlebek/svelte-email
email svelte sveltekit
Last synced: about 6 hours ago
JSON representation
Write and send emails with Svelte ✉️🚀
- Host: GitHub
- URL: https://github.com/carstenlebek/svelte-email
- Owner: carstenlebek
- License: mit
- Created: 2023-02-02T10:10:24.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T18:26:19.000Z (9 months ago)
- Last Synced: 2024-12-18T00:06:24.084Z (7 days ago)
- Topics: email, svelte, sveltekit
- Language: Svelte
- Homepage: https://svelte-email.vercel.app
- Size: 629 KB
- Stars: 491
- Watchers: 9
- Forks: 37
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Svelte Email
Designing emails has never been easier.
# Introduction
After seeing [react-email](https://github.com/resendlabs/react-email) I have decided to create a similar library for Svelte. `svelte-email` enables you to write and design email templates with svelte and render them to HTML or plain text.
# Installation
Install the package to your existing SvelteKit project:
```bash title="npm"
npm install svelte-email
```
```bash title="pnpm"
pnpm install svelte-email
```
# Getting started
## 1. Create an email using Svelte
`src/$lib/emails/Hello.svelte`
```html
import { Button, Hr, Html, Text } from 'svelte-email';
export let name = 'World';
Hello, {name}!
Visit Svelte
```
## 2. Send email
This example uses [Nodemailer](https://nodemailer.com/about/) to send the email. You can use any other email service provider.
`src/routes/emails/hello/+server.js`
```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({
template: Hello,
props: {
name: 'Svelte'
}
});
const options = {
from: '[email protected]',
to: '[email protected]',
subject: 'hello world',
html: emailHtml
};
transporter.sendMail(options);
```
# Documentation
For more information, please visit the [documentation](https://svelte-email.vercel.app/).
# Components
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](https://svelte-email.vercel.app/docs/components/HTML)
- [Head](https://svelte-email.vercel.app/docs/components/head)
- [Heading](https://svelte-email.vercel.app/docs/components/heading)
- [Button](https://svelte-email.vercel.app/docs/components/button)
- [Link](https://svelte-email.vercel.app/docs/components/link)
- [Image](https://svelte-email.vercel.app/docs/components/image)
- [Divider](https://svelte-email.vercel.app/docs/components/hr)
- [Paragraph](https://svelte-email.vercel.app/docs/components/paragraph)
- [Container](https://svelte-email.vercel.app/docs/components/container)
- [Preview](https://svelte-email.vercel.app/docs/components/preview)
- [Body](https://svelte-email.vercel.app/docs/components/body)
- [Column](https://svelte-email.vercel.app/docs/components/column)
- [Section](https://svelte-email.vercel.app/docs/components/section)
# Integrations
Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:
- [Nodemailer](https://github.com/resendlabs/react-email/tree/main/examples/nodemailer)
- [SendGrid](https://github.com/resendlabs/react-email/tree/main/examples/sendgrid)
- [Postmark](https://github.com/resendlabs/react-email/tree/main/examples/postmark)
- [AWS SES](https://github.com/resendlabs/react-email/tree/main/examples/aws-ses)
## Author
- Carsten Lebek ([@carstenlebek](https://twitter.com/carstenlebek1))
### Authors of the original project [react-email](https://github.com/resendlabs/react-email)
- Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita))
- Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha))