svelte-email

library0.0.4jsnpmunverified

svelte-email is a library that empowers developers to craft and design email templates using the Svelte framework. It provides a set of Svelte components (such as <Html>, <Button>, <Text>, <Hr>) that abstract away the complex and often archaic requirements of creating table-based, cross-client compatible HTML emails. The library facilitates rendering these Svelte components into static HTML or plain text strings, which can then be dispatched through any preferred email service provider (e.g., Nodemailer, SendGrid, Postmark). Currently at version 0.0.4, the project is in a very early development stage, implying that frequent, potentially breaking changes are highly probable as the library matures. Its key differentiator is bringing the ergonomic and reactive component-driven development paradigm of Svelte to email templating, mirroring the functionality of `react-email` for React, aiming to significantly simplify email design and maintenance workflows.

communication web-framework serialization

npm install svelte-email

package ↗

INSTALL

IMPORT

SIG · SVELTE-EMAIL

svelte-email

communicationjavascriptv0.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

render

✓ import { render } from 'svelte-email';

✗ const { render } = require('svelte-email');

The `render` function is the primary utility to convert a Svelte email component into an HTML string. Ensure you use named import syntax.

Html, Text, Button

✓ import { Html, Text, Button } from 'svelte-email';

✗ import Html from 'svelte-email/Html';

Core Svelte-Email components are exposed as named exports directly from the main package. Avoid direct component file imports.

Hello (Svelte component)

✓ import Hello from '$lib/emails/Hello.svelte';

✗ import { Hello } from '$lib/emails/Hello.svelte';

Your custom Svelte email components should be imported using their default export, typically following SvelteKit's `$lib` alias for components.

This quickstart demonstrates how to define a simple Svelte email component and then use the `render` function to convert it to HTML. It then uses Nodemailer to send the generated HTML email via an SMTP transporter, illustrating the full sending flow.

import { render } from 'svelte-email'; import Hello from '$lib/emails/Hello.svelte'; import nodemailer from 'nodemailer'; const transporter = nodemailer.createTransport({ host: process.env.SMTP_HOST ?? 'smtp.ethereal.email', port: 587, secure: false, auth: { user: process.env.SMTP_USER ?? 'my_user', pass: process.env.SMTP_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) .then(() => console.log('Email sent successfully!')) .catch(error => console.error('Error sending email:', error)); /* In $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>

Debug

Known issues

breakingAs of version 0.0.4, `svelte-email` is in very early development. Future `0.x` releases are highly likely to introduce breaking API changes without major version bumps, impacting existing implementations.

fix

Refer to the official documentation for the latest API when upgrading. Pin exact `0.0.x` versions to avoid unexpected breaks.

affects: >=0.0.1

gotchaEmail client compatibility remains a significant challenge. While `svelte-email` components aim for broad compatibility, complex custom CSS or advanced Svelte features might not render consistently or correctly across all email clients (e.g., Outlook, Gmail web/app).

fix

Test emails rigorously across various clients using services like Litmus or Email on Acid. Stick to standard HTML and inline CSS practices where possible.

affects: >=0.0.1

gotchaThe quickstart examples implicitly assume a SvelteKit project structure with `$lib` for email components. Users integrating `svelte-email` into a pure Svelte setup or other build environments might need to adjust import paths and component resolution.

fix

Ensure your build setup correctly resolves `.svelte` component imports. For non-SvelteKit projects, configure your bundler (Vite, Webpack, Rollup) to handle Svelte component paths appropriately.

affects: >=0.0.1

Errors

Common errors & fixes

Error: 'MyEmailComponent' is not a component

The specified Svelte component was not correctly imported or its path is wrong, preventing `svelte-email` from compiling it.

fix

Double-check the import path for your Svelte email component (e.g., `import MyEmailComponent from '$lib/emails/MyEmailComponent.svelte';`). Ensure the filename matches the component name if using default exports and that the file exists.

ReferenceError: render is not defined

The `render` function, responsible for converting Svelte components to HTML, was not imported from `svelte-email`.

fix

Add `import { render } from 'svelte-email';` at the top of your file where you intend to use the `render` function.

My email looks broken in Outlook/Gmail!

Specific CSS properties (e.g., `display: flex`, `position: absolute`) or complex HTML structures are not supported by certain email clients, leading to rendering inconsistencies.

fix

Simplify your email's design. Stick to basic HTML tables for layout and inline CSS for styling. Refer to 'email-safe' CSS guides. `svelte-email` components aim to help, but custom styles require careful testing.

Upgrade

Version history

0.0.4latest on npm

Audit

Dependencies

svelterequiredsvelte-email is a Svelte component library and requires Svelte as a peer dependency to function. It leverages Svelte's compilation and reactivity model.

Agent activity

16 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/svelte-email ↗