@mdxui/email
v0.1.0
Published
The email face of mdxui: render MDXLD documents to email HTML and plain text with React Email. Received from mdx.org.ai with history (ui-9ml4.1).
Readme
@mdxui/email
Received from mdx.org.ai with history under ui-9ml4.1. A face of the mdxui Contract: it takes an already-parsed MDXLD document (
mdxldparses upstream) and renders it. Every face snapshots the six Role fixtures from@mdxui/text/fixturesintosrc/__snapshots__/(Phase 0 slop gate) — a byte-changing render edit must update those goldens deliberately.
Render MDXLD documents to email HTML using React Email.
Installation
npm install @mdxui/email
# or
pnpm add @mdxui/email
# or
yarn add @mdxui/emailFeatures
- Email Rendering - Convert MDXLD documents to email-safe HTML
- React Email - Built on React Email components
- Plain Text - Automatic plain text version generation
- Component Mapping - Map MDX components to email components
- Type-Safe - Full TypeScript support
Quick Start
import { parse } from 'mdxld'
import { toEmail } from '@mdxui/email'
const doc = parse(`---
$type: Newsletter
subject: Weekly Update
previewText: Check out what's new this week
---
# Weekly Update
Hello **subscriber**!
Here's what's new this week:
- New feature launched
- Bug fixes
- Performance improvements
[Read more](https://example.com/blog)
`)
const { html, text, subject, previewText } = await toEmail(doc)
// Send with your email provider
await sendEmail({
to: '[email protected]',
subject,
html,
text,
})API Reference
toEmail(doc, options?)
Render an MDXLD document to email HTML.
function toEmail(
doc: MDXLDDocument,
options?: EmailRenderOptions
): Promise<EmailOutput>
interface EmailRenderOptions {
pretty?: boolean // Format HTML output (default: true)
plainText?: boolean // Generate plain text version (default: true)
components?: Record<string, React.ComponentType> // Custom components
}
interface EmailOutput {
html: string // Email HTML
text?: string // Plain text version
subject?: string // From frontmatter
previewText?: string // From frontmatter
}renderToHtml(doc, options?)
Convenience function to get just the HTML string.
const html = await renderToHtml(doc)renderToText(doc, options?)
Get just the plain text version.
const text = await renderToText(doc)Email Components
The package re-exports React Email components:
import {
Html,
Head,
Body,
Container,
Section,
Row,
Column,
Text,
Link,
Button,
Img,
Hr,
Heading,
Preview,
Tailwind,
} from '@mdxui/email'Custom Email Templates
Create custom email templates with React Email components:
import { Html, Head, Body, Container, Text, Button } from '@mdxui/email'
function WelcomeEmail({ name, link }) {
return (
<Html>
<Head />
<Body style={{ fontFamily: 'sans-serif' }}>
<Container>
<Text>Welcome, {name}!</Text>
<Button href={link}>Get Started</Button>
</Container>
</Body>
</Html>
)
}Examples
Newsletter Template
import { parse } from 'mdxld'
import { toEmail } from '@mdxui/email'
const newsletter = parse(`---
$type: Newsletter
subject: "March 2024 Newsletter"
previewText: "New features, updates, and more"
---
# March Newsletter
## What's New
We've been busy shipping new features:
### Feature Highlights
- **Dark Mode** - Now available across all platforms
- **API v2** - Faster and more reliable
- **Mobile App** - Download now
## Community Spotlight
Thanks to our amazing community members!
[Join our Discord](https://discord.gg/example)
---
You're receiving this because you subscribed at example.com
`)
const email = await toEmail(newsletter)Transactional Email
const orderConfirmation = parse(`---
$type: TransactionalEmail
subject: "Order Confirmed #{{orderId}}"
---
# Order Confirmed
Thank you for your order!
**Order Number:** {{orderId}}
**Total:** {{total}}
We'll send you a shipping confirmation once your order is on its way.
[View Order]({{orderUrl}})
`)
const email = await toEmail(orderConfirmation, {
// Template variables would be replaced during rendering
})Types
MDXLDDocument
interface MDXLDDocument {
id?: string
type?: string | string[]
context?: string | Record<string, unknown>
data: Record<string, unknown>
content: string
}Related Packages
| Package | Description | |---------|-------------| | mdxld | MDX + Linked Data parser | | @mdxui/html | HTML rendering | | react-email | React Email framework |
License
MIT