svelty-email

library0.1.1jsnpmunverified

Svelty-Email is a community-maintained fork of the svelte-email library, designed to facilitate the creation and rendering of email templates using Svelte. Inspired by React-Email, it allows developers to build responsive, component-based email layouts in a familiar Svelte environment, abstracting away the complexities of traditional HTML email development, such as table-based structures. The current stable version is 0.1.1, with a primary focus on adapting to Svelte's evolving ecosystem, including ongoing work for Svelte 5 support. Its key differentiator is enabling a modern Svelte development workflow for email templating, integrating seamlessly with SvelteKit projects and rendering emails to robust HTML or plain text suitable for various email service providers like Nodemailer. This project aims to keep the original library's vision alive and updated.

communication web-framework

npm install svelty-email

github ↗package ↗

INSTALL

IMPORT

SIG · SVELTY-EMAIL

svelty-email

communicationjavascriptv0.1.1

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 'svelty-email';

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

The `render` function is a named export for server-side email rendering, primarily used in SvelteKit server routes.

Html, Text, Button

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

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

Core Svelte components like Html, Text, and Button are named exports from the main package entry point for use within your Svelte email templates.

Email Components (e.g., Column, Section)

✓ import { Column, Section } from 'svelty-email';

✗ import { Column, Section } from 'svelty-email/components';

All provided email components are re-exported directly from the root `svelty-email` package, simplifying import paths.

This quickstart demonstrates how to define a basic email template using Svelte components provided by svelty-email and then render it to HTML for sending via Nodemailer in a SvelteKit context.

import { render } from 'svelty-email'; import Hello from '$lib/emails/Hello.svelte'; import nodemailer from 'nodemailer'; // src/$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> const transporter = nodemailer.createTransport({ host: process.env.SMTP_HOST ?? 'smtp.ethereal.email', port: parseInt(process.env.SMTP_PORT ?? '587', 10), secure: process.env.SMTP_SECURE === 'true', auth: { user: process.env.SMTP_USER ?? 'my_user', pass: process.env.SMTP_PASSWORD ?? '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) .then(() => console.log('Email sent successfully!')) .catch(error => console.error('Failed to send email:', error)); // Example of usage in a SvelteKit server route (e.g., src/routes/send-email/+server.js) // export async function POST() { // // ... (email sending logic as above) // return new Response('Email sent', { status: 200 }); // }

Debug

Known issues

breakingVersion 0.1.x introduces breaking changes for Svelte 5 support. Applications built with Svelte 4 should explicitly use version 0.0.11 to maintain compatibility.

fix

For Svelte 4 projects: `npm install svelty-email@0.0.11`. For Svelte 5 projects: ensure your SvelteKit setup is compatible with Svelte 5 and install `svelty-email@latest`.

affects: >=0.1.0

gotchaThe official documentation linked from the README (svelte-email.vercel.app) refers to the previous, unmaintained `svelte-email` project. While examples are useful, ensure you substitute `svelty-email` for `svelte-email` in imports and package names.

fix

Always use `svelty-email` in your project's `package.json` and `import` statements. Adapt examples from the old documentation by replacing the package name.

affects: >=0.0.0

gotchaThe `Section` component should not be used as a root element in your email templates, as doing so can potentially break styling and layout in various email clients.

fix

Always wrap your email content, including `Section` components, within the `Html` component, which should typically be the root element of your email template.

affects: >=0.0.0

gotchaSome advanced examples, like the Airbnb REPL, might have outdated formatting or broken assets (e.g., logos) due to being based on older documentation or resource links.

fix

Use advanced examples as a conceptual guide but be prepared to update asset paths, styling, and potentially component usage to align with the latest `svelty-email` version and your project's structure.

affects: >=0.0.0

Errors

Common errors & fixes

Error: A Svelte 5 component was passed to a Svelte 4 compatible function/utility.

Attempting to use `svelty-email` versions 0.1.x (designed for Svelte 5) with a Svelte 4-based SvelteKit project.

fix

For Svelte 4 projects, downgrade `svelty-email` to version `0.0.11` (`npm install svelty-email@0.0.11`). For Svelte 5 projects, ensure your SvelteKit setup is fully updated to Svelte 5 and use the latest `svelty-email`.

Module not found: Error: Can't resolve 'svelty-email'

The `svelty-email` package has not been installed, or there's a typo in the import path.

fix

Ensure the package is installed by running `npm install svelty-email` or `pnpm install svelty-email` in your project's root directory.

Error: Cannot find module 'nodemailer' from 'your-project-path'

The `nodemailer` package, used for sending emails, is an external dependency and is not automatically installed with `svelty-email`.

fix

Install `nodemailer` separately using your package manager: `npm install nodemailer` or `pnpm install nodemailer`.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

@sveltejs/kitrequiredPeer dependency for SvelteKit projects, required for development and rendering.

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/cmjoseph07/svelty-email ↗

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