### Install Svelty-Email with npm
Source: https://github.com/cmjoseph07/svelty-email/blob/master/README.md
Install the svelty-email package into your SvelteKit project using npm. This is the first step to start using the library for email template design.
```bash
npm install svelty-email
```
--------------------------------
### Install Svelty-Email with pnpm
Source: https://github.com/cmjoseph07/svelty-email/blob/master/README.md
Install the svelty-email package into your SvelteKit project using pnpm. This command is an alternative to npm for package management.
```bash
pnpm install svelty-email
```
--------------------------------
### Install Dependencies for Svelte Email and Postmark
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...4]postmark/+page.md
Installs the necessary npm packages, svelte-email and postmark, which are required for creating and sending emails. This step is crucial for setting up the project environment.
```bash
npm install svelte-email postmark
```
```bash
pnpm add svelte-email postmark
```
--------------------------------
### Create Welcome Email Template with Svelte
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...2]getting-started/[...2]usage/+page.md
Demonstrates creating a responsive email template using Svelte components from the `svelte-email` library. It includes basic structure, styling, and dynamic content injection via props.
```svelte
{firstName}, welcome to svelte-emailA Svelte component library for building responsive emailsHappy coding!Carsten Lebek
```
--------------------------------
### Send Email using Svelty-Email and Nodemailer
Source: https://github.com/cmjoseph07/svelty-email/blob/master/README.md
Demonstrates how to render a Svelte email template to HTML using `svelty-email`'s `render` function and then send it via email using Nodemailer. This example sets up a Nodemailer transporter and sends a simple 'hello world' email.
```javascript
import { render } from 'svelty-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: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: emailHtml
};
transporter.sendMail(options);
```
--------------------------------
### Install Dependencies with pnpm
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...2]nodemailer/+page.md
Installs the svelte-email and nodemailer packages using pnpm, essential libraries for email functionality in Svelte applications.
```bash
pnpm add svelte-email nodemailer
```
--------------------------------
### Svelte Full Email Example
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
This Svelte code demonstrates a complete, full-featured transactional email. It integrates various components like Html, Head, Body, Container, Section, Text, Heading, Button, Link, Img, and Hr to showcase real-world usage patterns and a modern email design. It includes placeholders for dynamic content such as user name, order details, and tracking information.
```svelte
Here's what {authorName} wrote{reviewText}
Now that the review period is over, we’ve posted {authorName}’s review to your Airbnb
profile.
While it’s too late to write a review of your own, you can send your feedback to {authorName}
using your Airbnb message thread.
Common questions
How do reviews work?
How do star ratings work?
Can I leave a review after 14 days?
Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
Report unsafe behavior
```
--------------------------------
### Display Image using Svelte Component
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...3]components/[...9]image/+page.md
This snippet demonstrates how to use the `Img` component from `svelte-email` to display an image. It requires the `src`, `alt`, `width`, and `height` props. Ensure image URLs are accessible by email clients.
```svelte
```
--------------------------------
### Render and Send Email with SendGrid Node.js SDK
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...3]sendgrid/+page.md
A server route that renders a Svelte email template into HTML using 'svelte-email' and then sends the email via SendGrid. It requires the SENDGRID_API_KEY environment variable to be set and configures sender, recipient, subject, and HTML content.
```javascript
import { render } from 'svelte-email';
import Hello from '$lib/emails/Hello.svelte';
import sendgrid from '@sendgrid/mail';
sendgrid.setApiKey(process.env.SENDGRID_API_KEY);
const emailHtml = render({
template: Hello,
props: {
name: 'Svelte'
}
});
const options = {
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: emailHtml,
};
sendgrid.send(options);
```
--------------------------------
### Create Email Headings with Svelte
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
Generates semantic HTML heading elements (h1-h6) with utility props for margins. Allows customization of font size, color, and line height for consistent spacing.
```svelte
Welcome to Svelty-Email
Build beautiful emails with Svelte components.
Getting Started
Follow these simple steps to create your first email.
Features
```
--------------------------------
### Svelte Component to Render Email HTML
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...6]examples/[...1]airbnb-review/+page.md
This Svelte component is responsible for displaying the generated HTML content of the email. It takes the HTML string via `data.html` and renders it within an iframe, allowing for preview. It also handles the display of plain text version of the email.
```svelte
{@html data.plainText.replace(/\n/g, " ")}
```
--------------------------------
### Importing Svelte Components for Email Design
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...1]overview/[...1]svelte-email/+page.md
This snippet demonstrates importing various Svelte components used for structuring and designing email content. It includes components for layout (Card, CardGroup) and specific content types (HTML, Container, Button, Text), along with icon components.
```svelte
```
--------------------------------
### Style Hyperlinks with Svelte
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
Creates styled hyperlinks suitable for email, featuring default email-safe colors and text decoration. Allows customization of color, decoration, and font weight.
```svelte
Please review our
Terms of Service
and
Privacy Policy
.
Visit your dashboard:
https://app.example.com/dashboard
```
--------------------------------
### Render Svelte Email Button Component
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...3]components/[...3]button/+page.md
Demonstrates how to import and use the Button component from 'svelte-email' in a Svelte application. It shows how to pass an href and inline styles to the button.
```svelte
```
--------------------------------
### Structure Email Layouts with Svelte Sections
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
Provides a table-based layout wrapper that supports automatic grid layout for columns. Utilizes CSS Grid for modern layout control and allows customization of background color, padding, and margins.
```svelte
Feature description goes hereFull-width content section
```
--------------------------------
### Create a hyperlink using Svelte Email Link
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...3]components/[...10]link/+page.md
This snippet demonstrates how to import and use the Link component from 'svelte-email' to create a basic hyperlink. It requires the 'href' prop to be set with a valid URL.
```svelte
Svelte
```
--------------------------------
### Body Component for Email Content Wrapper
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `Body` component acts as the main content wrapper for your email. It allows for extensive styling, including background colors, font families, and padding, ensuring a consistent look and feel for your email's visible content.
```svelte
Welcome to our newsletter!
```
--------------------------------
### Html Component for Email Root Element
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `Html` component serves as the root wrapper for your email template, generating the `` element. It accepts a `lang` attribute for specifying the document language and is essential for setting up the basic structure of an email.
```svelte
Email content here
```
--------------------------------
### Render and Send Email with Nodemailer (Node.js)
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...2]nodemailer/+page.md
A SvelteKit server route that renders a Svelte email template to HTML using `svelte-email` and sends it via Nodemailer. It configures an SMTP transporter, defines email options, and dispatches the email. Requires Nodemailer and svelte-email.
```js
import { json } from '@sveltejs/kit';
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: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: emailHtml
};
transporter.sendMail(options);
```
--------------------------------
### Create Svelte Email Template
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...4]postmark/+page.md
Defines a reusable Svelte component to serve as an email template. This template can include dynamic content and standard email elements like text and buttons, leveraging Svelte's reactivity and component system.
```svelte
Hello, {name}!
```
--------------------------------
### Head Component for Email Metadata
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `Head` component encapsulates the `` section of your email, allowing you to include essential meta tags for email clients. This includes character set declarations and color scheme preferences, ensuring better rendering across different platforms.
```svelte
```
--------------------------------
### Display Images with Svelte
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
Renders images with email-client-safe defaults, including proper border and outline removal. Supports setting `src`, `alt`, `width`, `height`, and custom styles.
```svelte
```
--------------------------------
### Container Component for Centered Content
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `Container` component is used to center your email content and enforce a maximum width, typically 600px. It automatically generates Outlook-compatible table wrappers to ensure consistent layout across various email clients.
```svelte
This content is centered and has a max width
```
--------------------------------
### Svelte Email Receipt Template
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...6]examples/[...1]apple-receipt/+page.md
This Svelte component defines the structure and styling for an email receipt. It imports necessary components from '$lib' and utility functions for style manipulation. The template includes styles for the overall layout, header, product details, pricing, and footer, making it suitable for e-commerce or transactional emails. It uses inline styles extensively for maximum email client compatibility.
```svelte
Receipt
Save 3% on all your Apple purchases with Apple Card.
```
--------------------------------
### TypeScript Utility for CSS-in-JS to Inline Styles
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The styleToString utility function converts CSS-in-JS style objects into inline style strings, which are necessary for email client compatibility. It takes a style object as input and returns a formatted string suitable for HTML 'style' attributes. This utility is crucial for applying dynamic styles to email components.
```typescript
import { styleToString } from 'svelty-email/utils';
const styleObject = {
backgroundColor: '#ffffff',
padding: '20px',
fontSize: '16px',
lineHeight: '1.5',
borderRadius: '4px'
};
const inlineStyle = styleToString(styleObject);
// Returns: "background-color:#ffffff;padding:20px;font-size:16px;line-height:1.5;border-radius:4px;"
// Use in custom components
const buttonStyle = styleToString({
color: '#ffffff',
backgroundColor: '#007bff',
textDecoration: 'none'
});
// Apply to any HTML element
const html = `Click Here`;
```
--------------------------------
### Set Email Preview Text with Svelte
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
Defines the preview text that appears in email client inbox lists. Includes automatic whitespace padding to ensure the preview text is displayed correctly and doesn't leak into the email body.
```svelte
Order Confirmation
```
--------------------------------
### Render Svelte Email Component to HTML and Text
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `render` function converts a Svelte email component into email-ready HTML and plain text formats. It handles server-side rendering and adds necessary DOCTYPE declarations. This function is crucial for generating the final email content to be sent via services like Nodemailer.
```typescript
import { render } from 'svelty-email';
import WelcomeEmail from '$lib/emails/Welcome.svelte';
// Basic rendering with props
const { html, text } = await render(WelcomeEmail, {
firstName: 'Jane',
subscriptionDate: '2024-01-15'
});
// html contains:
// text contains: Plain text version with images and preview stripped
// Send via Nodemailer
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
secure: false,
auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASS
}
});
await transporter.sendMail({
from: 'noreply@example.com',
to: 'user@example.com',
subject: 'Welcome to Our Service',
html: html,
text: text
});
```
--------------------------------
### Render Svelte Component to HTML Email
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...4]utilities/[...1]render/+page.md
Convert a Svelte email component into an HTML string. This SvelteKit server route imports the Svelte component and uses the 'render' function from 'svelte-email' to generate the HTML output.
```javascript
import { json } from '@sveltejs/kit';
import { render } from 'svelte-email';
import Hello from '$lib/emails/Hello.svelte';
export function GET() {
const html = render({
template: Hello,
props: {
name: 'World'
}
});
return json({
html
});
}
```
--------------------------------
### Send Email using Svelte Email and AWS SES SDK
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...5]aws-ses/+page.md
A server-side route that renders a Svelte email template to HTML and sends it via AWS SES. It configures AWS credentials, uses the 'render' function from 'svelte-email', and constructs the 'sendEmail' options for the AWS SES SDK.
```javascript
import { render } from 'svelte-email';
import Hello from '$lib/emails/Hello.svelte';
import AWS from 'aws-sdk';
AWS.config.update({ region: process.env.AWS_SES_REGION });
const emailHtml = render({
template: Hello,
props: {
name: 'Svelte'
}
});
const options = {
Source: 'you@example.com',
Destination: {
ToAddresses: ['user@gmail.com']
},
Message: {
Body: {
Html: {
Charset: 'UTF-8',
Data: emailHtml
}
},
Subject: {
Charset: 'UTF-8',
Data: 'hello world'
}
}
};
const sendPromise = new AWS.SES({ apiVersion: '2010-12-01' }).sendEmail(options).promise();
```
--------------------------------
### Text Component for Email Paragraphs
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `Text` component renders standard paragraph text within your email. It provides consistent default styling for font size, line height, and margins, while also allowing for custom inline styles to adjust the appearance of individual text elements.
```svelte
Hello {name}, thanks for signing up! We're excited to have you on board.
If you have any questions, feel free to reply to this email.
```
--------------------------------
### Displaying a Divider with Hr Component in Svelte
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...3]components/[...8]hr/+page.md
This snippet demonstrates how to import and use the Hr component from the 'svelte-email' library to render a horizontal rule. No external dependencies are required beyond the library itself. The Hr component can optionally accept a 'style' prop to customize its appearance.
```svelte
```
```
--------------------------------
### Render and Send Email with SendGrid Node.js SDK
Source: https://github.com/cmjoseph07/svelty-email/blob/master/src/routes/docs/[...5]integrations/[...3]sendgrid/+page.md
A server route that renders a Svelte email template into HTML using 'svelte-email' and then sends the email via SendGrid. It requires the SENDGRID_API_KEY environment variable to be set and configures sender, recipient, subject, and HTML content.
```javascript
import { render } from 'svelte-email';
import Hello from '$lib/emails/Hello.svelte';
import sendgrid from '@sendgrid/mail';
sendgrid.setApiKey(process.env.SENDGRID_API_KEY);
const emailHtml = render({
template: Hello,
props: {
name: 'Svelte'
}
});
const options = {
from: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: emailHtml,
};
sendgrid.send(options);
```
--------------------------------
### Create Email Headings with Svelte
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
Generates semantic HTML heading elements (h1-h6) with utility props for margins. Allows customization of font size, color, and line height for consistent spacing.
```svelte
```
--------------------------------
### Container Component for Centered Content
Source: https://context7.com/cmjoseph07/svelty-email/llms.txt
The `Container` component is used to center your email content and enforce a maximum width, typically 600px. It automatically generates Outlook-compatible table wrappers to ensure consistent layout across various email clients.
```svelte
