@rakun-kit/jsx-email
v1.0.0
Published
JSX Email template renderer for Rakun mail.
Downloads
32
Readme
@rakun-kit/jsx-email
ESM-only JSX Email renderer for Rakun's typed mail templates.
Setup
bun add @rakun-kit/jsx-email jsx-email react react-domJSX Email 3 requires Node.js 22+ and React 19.2+. Define each previewable component in its own file:
// emails/WelcomeEmail.tsx
import { Body, Html, Text } from 'jsx-email'
export type WelcomeEmailProps = {
name: string
activationUrl: string
}
export const previewProps = {
name: 'Ada',
activationUrl: 'https://example.com/activate',
} satisfies WelcomeEmailProps
export const Template = ({ name, activationUrl }: WelcomeEmailProps) => (
<Html>
<Body>
<Text>Hello {name}</Text>
<a href={activationUrl}>Activate account</a>
</Body>
</Html>
)
export default TemplateRegister it with a subject. The component's props are preserved by
createMailSender:
import { createMailSender } from '@rakun-kit/core'
import { createJsxEmailTemplate } from '@rakun-kit/jsx-email'
import WelcomeEmail from './emails/WelcomeEmail'
export const mail = createMailSender({
templates: {
welcome: createJsxEmailTemplate({
component: WelcomeEmail,
subject: ({ name }) => `Welcome, ${name}`,
}),
},
})
await mail.send({
template: 'welcome',
props: {
name: 'Ada',
activationUrl: 'https://example.com/activate',
},
to: '[email protected]',
})HTML and plain text are rendered automatically. Pass text: false for
HTML-only output, or a function to provide custom plain text. renderOptions
accepts JSX Email render options other than plainText.
Preview
bunx email preview emails
bunx email check emails/WelcomeEmail.tsx --use-preview-propsThe preview server reads the component's named previewProps export.