@backstro/email
Advanced tools
Compose email templates with Astro components — a direct port of react-email component to native
.astrosyntax.
npm install @backstro/email
# or
pnpm add @backstro/email
astro >= 4.0 is the only peer dependency.
---
// src/emails/WelcomeEmail.astro
import {
Html, Head, Body, Container,
Section, Heading, Text, Button,
Hr, Preview, Font,
} from '@backstro/email';
interface Props {
name: string;
url: string;
}
const { name, url } = Astro.props;
---
<Html lang="en">
<Head>
<title>Welcome, {name}!</title>
<Font
fontFamily="Inter"
fallbackFontFamily={['Arial', 'sans-serif']}
webFont={{
url: 'https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2',
format: 'woff2',
}}
/>
</Head>
<Body style={{ backgroundColor: '#f5f5f5' }}>
<Preview>Welcome to our platform, {name} 🎉</Preview>
<Container style={{ backgroundColor: '#ffffff', padding: '40px 24px' }}>
<Section>
<Heading as="h1" style={{ color: '#111', fontSize: '28px' }}>
Hi {name}, welcome aboard!
</Heading>
<Text>
We're thrilled to have you. Click the button below to confirm your
email address and get started.
</Text>
<Hr />
<Button
href={url}
style={{
backgroundColor: '#0070f3',
color: '#ffffff',
padding: '12px 24px',
borderRadius: '6px',
fontWeight: '600',
}}
>
Confirm email address
</Button>
<Text style={{ color: '#666', fontSize: '12px', marginTop: '32px' }}>
If you didn't create an account, you can safely ignore this email.
</Text>
</Section>
</Container>
</Body>
</Html>
// src/pages/api/send-welcome.ts
import type { APIRoute } from "astro";
import { render } from "@backstro/email/render";
import WelcomeEmail from "../../emails/WelcomeEmail.astro";
export const POST: APIRoute = async ({ request }) => {
const { name, email } = await request.json();
const html = await render(WelcomeEmail, {
name,
url: "https://example.com/confirm",
});
// Pass `html` to any sending service (Resend, Nodemailer, SES, …)
await fetch("https://api.resend.com/emails", {
method: "POST",
headers: {
Authorization: `Bearer ${import.meta.env.RESEND_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
from: "hello@example.com",
to: email,
subject: `Welcome, ${name}!`,
html,
}),
});
return new Response(JSON.stringify({ ok: true }));
};
| Component | HTML output | Notes |
|---|---|---|
<Html> | <html> | Sets lang + dir |
<Head> | <head> | Injects required email meta tags |
<Body> | <body> / table | Yahoo/AOL margin-reset wrapper |
<Preview> | hidden <div> | Inbox preview text (≤ 150 chars) |
<Container> | centered <table> | maxWidth: 37.5em |
<Section> | full-width <table> | Block-level section |
<Row> | <table> + <tr> | Horizontal row |
<Column> | <td> | Use inside <Row> |
<Heading> | <h1>–<h6> | as + margin shorthands |
<Text> | <p> | 14 px / 24 px line-height defaults |
<Button> | <a> + MSO spacers | Outlook-compatible padded button |
<Link> | <a> | Opens in new tab by default |
<Img> | <img> | display:block + border reset |
<Hr> | <hr> | Full-width rule |
<Font> | <style> @font-face | Place inside <Head> |
<CodeBlock> | <pre><code> | Prism.js inline-styled syntax highlighting |
<CodeInline> | <code> + <span> | Orange.fr-compatible inline code |
<Markdown> | rendered HTML | Inline-styled Markdown via marked |
Four themes are built in:
import { themes } from "@backstro/email";
// themes.dracula | themes.githubLight | themes.nightOwl | themes.vsDark
Pass your chosen theme to the theme prop:
---
import { CodeBlock, themes } from '@backstro/email';
---
<CodeBlock
code={`const greet = (name: string) => \`Hello, \${name}!\`;`}
language="typescript"
theme={themes.dracula}
lineNumbers
/>
You can also supply your own custom theme — any object that maps Prism token
type names to CSS-in-JS style objects, plus a base key for the outer <pre>:
import type { Theme } from "@backstro/email";
export const myTheme: Theme = {
base: { background: "#1a1a1a", color: "#eee", padding: "16px" },
keyword: { color: "#ff79c6" },
string: { color: "#f1fa8c" },
// …
};
<Heading> accepts shorthand margin props identical to react-email's version:
| Prop | CSS equivalent |
|---|---|
m | margin |
mx | margin-left + margin-right |
my | margin-top + margin-bottom |
mt | margin-top |
mr | margin-right |
mb | margin-bottom |
ml | margin-left |
<Heading as="h2" mt={40} mb={16}>Section title</Heading>
import { render, renderText } from "@backstro/email/render";
// Full HTML
const html = await render(MyEmail, { name: "Alice" });
// Plain-text fallback (strips tags)
const text = await renderText(MyEmail, { name: "Alice" });
Both functions use Astro's AstroContainer API (stable since Astro 4.9).
All style props accept a plain JavaScript object (CSS-in-JS). Astro serialises
them to style="..." attributes on the rendered HTML, which is exactly what
email clients require.
<Text style={{ color: '#333', fontSize: '16px', lineHeight: '28px' }}>
Styled text
</Text>
---
import { Markdown } from '@backstro/email';
const md = `
# Update available
We've just shipped **version 2.0**. Here's what's new:
- Faster rendering
- Dark-mode support
- [See the changelog](https://example.com/changelog)
`;
---
<Markdown
markdownContainerStyles={{ fontFamily: 'sans-serif', color: '#333' }}
markdownCustomStyles={{ h1: { color: '#0070f3' } }}
>
{md}
</Markdown>
Install tailwindcss (v4):
npm install tailwindcss
Use Tailwind utility classes directly on your components:
---
// emails/PromoEmail.astro
import { Html, Head, Body, Container, Heading, Text, Button } from '@backstro/email';
---
<Html>
<Head />
<Body class="bg-gray-50 font-sans">
<Container class="bg-white rounded-lg p-8 max-w-xl mx-auto my-10">
<Heading as="h1" class="text-2xl font-bold text-blue-600">
Hello from Astro Email!
</Heading>
<Text class="text-gray-600 text-sm leading-6 mt-4">
This email was built with Astro components and styled with Tailwind CSS.
</Text>
<Button
href="https://example.com"
class="bg-blue-600 text-white font-semibold py-3 px-6 rounded mt-6"
>
Get started
</Button>
</Container>
</Body>
</Html>
Pass a tailwind option to render() to automatically inline all Tailwind classes:
import { render } from "@backstro/email/render";
import PromoEmail from "./emails/PromoEmail.astro";
// All Tailwind classes are converted to inline styles automatically.
const html = await render(PromoEmail, { name: "Alice" }, { tailwind: {} });
You can also call inlineTailwind manually for full control:
import { inlineTailwind } from "@backstro/email/tailwind";
const rawHtml = await render(PromoEmail);
const html = await inlineTailwind(rawHtml, {
config: {
theme: {
extend: {
colors: { brand: "#0070f3" },
},
},
},
});
inlineTailwind works as an HTML post-processor:
class="..." attributes in the rendered HTML.p-4, text-blue-500, …) to style="…" attributes directly on each element.<style> block inside <head>.Note: Hover/focus effects will only work in email clients that support
<style>blocks (most webmail clients do). Outlook on Windows will ignore them.
MIT
FAQs
Astro components for building email templates
We found that @backstro/email demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
The campaign amassed more than 75,000 installs by targeting Russian-speaking users seeking access to blocked services.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.
Security News
The supply chain control that delays freshly published gems now covers lockfile generation and gem vendoring in Ruby projects.