These components form the foundational HTML structure of your email. Every email should include these components in the proper hierarchy.
Html
The root HTML element that wraps your entire email. Automatically includes the proper DOCTYPE for email compatibility.
Props
Language code for the email content
dir
'ltr' | 'rtl' | 'auto'
default:"ltr"
Text direction for the email
Email content (typically Head and Body components)
HTMLHtmlAttributes.
Usage
<Html lang="en" dir="ltr">
<Head />
<Body>
<!-- Email content -->
</Body>
</Html>
Basic
With Language
RTL Support
<Html>
<Head />
<Body>
<Text>Hello World</Text>
</Body>
</Html>
<Html lang="es" dir="ltr">
<Head />
<Body>
<Text>Hola Mundo</Text>
</Body>
</Html>
<Html lang="ar" dir="rtl">
<Head />
<Body>
<Text>مرحبا بالعالم</Text>
</Body>
</Html>
Head
Contains meta tags and email client compatibility settings. Automatically includes essential meta tags for responsive emails.
Props
Additional head content (style tags, meta tags, etc.)
content-type with UTF-8 charsetviewport for mobile responsivenessx-apple-disable-message-reformatting for Apple Mailx-ua-compatible for IE Edge mode
Usage
<Head>
<!-- Optional: Add custom styles or meta tags -->
</Head>
<Html>
<Head />
<Body>
<!-- Content -->
</Body>
</Html>
<Html>
<Head>
<style>
{`
.custom-class {
color: #333;
}
`}
</style>
</Head>
<Body>
<!-- Content -->
</Body>
</Html>
Body
The email body wrapper. Uses table-based layout for maximum email client compatibility.
Props
Inline CSS styles applied to the body content wrapper
Tailwind CSS classes or custom CSS classes
HTMLAttributes<HTMLBodyElement>.
Usage
<Body class="bg-gray-50 font-sans">
<Container>
<!-- Email content -->
</Container>
</Body>
Basic
With Background
With Custom Font
<Body>
<Text>Email content goes here</Text>
</Body>
<Body class="bg-gray-100">
<Container>
<Text>Content with gray background</Text>
</Container>
</Body>
<Body
class="font-sans"
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"
>
<Container>
<Text>Content with custom font</Text>
</Container>
</Body>
Preview
Defines the preview text that appears in email client inboxes before the email is opened. This is crucial for engagement.
Props
The preview text (max 150 characters)
HTMLAttributes<HTMLDivElement>.
Features
- Automatically truncated to 150 characters
- Hidden from the visible email content
- Fills remaining space with invisible characters to prevent email clients from showing body text
Usage
<Preview preview="Your order has been confirmed and will ship soon!" />
Basic
Transactional Email
Marketing Email
<Body>
<Preview preview="Welcome to our newsletter!" />
<Container>
<!-- Email content -->
</Container>
</Body>
<Body>
<Preview preview="Your order #12345 has been shipped" />
<Container>
<Heading>Order Confirmation</Heading>
<!-- Order details -->
</Container>
</Body>
<Body>
<Preview preview="Limited time: 50% off everything! Don't miss out." />
<Container>
<Heading>Flash Sale!</Heading>
<!-- Promotion content -->
</Container>
</Body>
Complete Example
Here’s a complete email structure using all four components:
<script lang="ts">
import { Html, Head, Body, Preview, Container, Heading, Text } from 'better-svelte-email';
</script>
<Html lang="en">
<Head />
<Body class="bg-white font-sans">
<Preview preview="Your weekly digest is ready!" />
<Container class="mx-auto my-10 max-w-xl p-5">
<Heading as="h1" class="text-2xl font-bold text-gray-900">
Your Weekly Digest
</Heading>
<Text class="text-gray-700">
Here are the highlights from this week.
</Text>
</Container>
</Body>
</Html>
Best Practices
Always include all four components in your email. The proper hierarchy is:
Html > Head + Body > Preview + Container + Content
Write compelling preview text that encourages recipients to open your email. Think of it as a mini subject line.
The Body component uses table-based layout for compatibility. This is required for older email clients like Outlook.