{"id":16231,"library":"svelty-email","title":"Svelty-Email","description":"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.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/cmjoseph07/svelty-email","tags":["javascript","svelte","sveltekit","email","typescript"],"install":[{"cmd":"npm install svelty-email","lang":"bash","label":"npm"},{"cmd":"yarn add svelty-email","lang":"bash","label":"yarn"},{"cmd":"pnpm add svelty-email","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for SvelteKit projects, required for development and rendering.","package":"@sveltejs/kit","optional":false}],"imports":[{"note":"The `render` function is a named export for server-side email rendering, primarily used in SvelteKit server routes.","wrong":"const { render } = require('svelty-email');","symbol":"render","correct":"import { render } from 'svelty-email';"},{"note":"Core Svelte components like Html, Text, and Button are named exports from the main package entry point for use within your Svelte email templates.","wrong":"import Html from 'svelty-email/Html.svelte';","symbol":"Html, Text, Button","correct":"import { Html, Text, Button } from 'svelty-email';"},{"note":"All provided email components are re-exported directly from the root `svelty-email` package, simplifying import paths.","wrong":"import { Column, Section } from 'svelty-email/components';","symbol":"Email Components (e.g., Column, Section)","correct":"import { Column, Section } from 'svelty-email';"}],"quickstart":{"code":"import { render } from 'svelty-email';\nimport Hello from '$lib/emails/Hello.svelte';\nimport nodemailer from 'nodemailer';\n\n// src/$lib/emails/Hello.svelte\n// \n// \n// \t\n// \t\tHello, {name}!\n// \t\n// \t

\n// \t\n// \n\nconst transporter = nodemailer.createTransport({\n\thost: process.env.SMTP_HOST ?? 'smtp.ethereal.email',\n\tport: parseInt(process.env.SMTP_PORT ?? '587', 10),\n\tsecure: process.env.SMTP_SECURE === 'true',\n\tauth: {\n\t\tuser: process.env.SMTP_USER ?? 'my_user',\n\t\tpass: process.env.SMTP_PASSWORD ?? 'my_password'\n\t}\n});\n\nconst emailHtml = render({\n\ttemplate: Hello,\n\tprops: {\n\t\tname: 'Svelte'\n\t}\n});\n\nconst options = {\n\tfrom: 'you@example.com',\n\tto: 'user@gmail.com',\n\tsubject: 'hello world',\n\thtml: emailHtml\n};\n\ntransporter.sendMail(options)\n\t.then(() => console.log('Email sent successfully!'))\n\t.catch(error => console.error('Failed to send email:', error));\n\n// Example of usage in a SvelteKit server route (e.g., src/routes/send-email/+server.js)\n// export async function POST() {\n// // ... (email sending logic as above)\n// return new Response('Email sent', { status: 200 });\n// }\n","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"Version 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.","severity":"breaking","affected_versions":">=0.1.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always wrap your email content, including `Section` components, within the `Html` component, which should typically be the root element of your email template.","message":"The `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.","severity":"gotcha","affected_versions":">=0.0.0"},{"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.","message":"Some 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.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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`.","cause":"Attempting to use `svelty-email` versions 0.1.x (designed for Svelte 5) with a Svelte 4-based SvelteKit project.","error":"Error: A Svelte 5 component was passed to a Svelte 4 compatible function/utility."},{"fix":"Ensure the package is installed by running `npm install svelty-email` or `pnpm install svelty-email` in your project's root directory.","cause":"The `svelty-email` package has not been installed, or there's a typo in the import path.","error":"Module not found: Error: Can't resolve 'svelty-email'"},{"fix":"Install `nodemailer` separately using your package manager: `npm install nodemailer` or `pnpm install nodemailer`.","cause":"The `nodemailer` package, used for sending emails, is an external dependency and is not automatically installed with `svelty-email`.","error":"Error: Cannot find module 'nodemailer' from 'your-project-path'"}],"ecosystem":"npm"}