# svelte-email > Build emails with Svelte Latest version **0.0.4** (published 2023-02-09) · 0 weekly downloads ## Install ```sh npm install svelte-email pnpm add svelte-email yarn add svelte-email bun add svelte-email ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.4 | | Published | 2023-02-09 | | First published | 2023-02-02 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 3 | | Unpacked size | 253.1 KB | | Known vulnerabilities | 0 (+7 in 1 direct dependencies) | | Install scripts | no | | Author | Carsten Lebek | | Maintainers | carstenlebek | ## Links - npm: https://www.npmjs.com/package/svelte-email - npm.io page: https://npm.io/package/svelte-email ## Dependencies (3) - [pretty](https://npm.io/package/pretty.md) ^2.0.0 - [svelte](https://npm.io/package/svelte.md) ^3.55.1 - [html-to-text](https://npm.io/package/html-to-text.md) ^9.0.3 ## Recent versions - 0.0.4 (latest) — 2023-02-09 - 0.0.3 — 2023-02-04 - 0.0.2 — 2023-02-04 - 0.0.1 — 2023-02-02 ## README ![svelte-email-banner](https://user-images.githubusercontent.com/59960385/216772883-6cc40ff9-ef6e-4269-bed3-17c1023bbaf6.png)
Svelte Email
Designing emails has never been easier.

Documentation · GitHub
# 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 Hello, {name}!
``` ## 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({ component: Hello, props: { name: 'Svelte' } }); const options = { from: 'you@example.com', to: 'user@gmail.com', 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)) --- _Source: https://npm.io/package/svelte-email · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._