Brail
Transactional email that feels different
Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients. It aims to seperate the concerns of generating the emails and delivering them.
In a few lines of code, Brail lets you turn a nextjs app into an email templating server.
💌 Preview emails
📤 Regular deploying to vercel, netlify etc.
📫 JSX templating
📦 Leaves email delivery up to you
Brail is currently in Alpha, and may receive breaking changes at any time.
Installation
# npm i / yarn add / pnpm add
@brail/core @brail/react @brail/mjml
Usage example
pages/product-template.tsx:
// (Optionally) define props
export type ProductsTemplateProps = {
products: Array<{ name: string; price: string }>;
};
// Create template component
const ProductsTemplateComponent = (props: ProductsTemplateProps) => {
return (
<EmailTemplate>
<MyHeader />
<Container paddingTop={100} color={theme.red}>
{props.products.map((p) => {
return (
<Row>
<Column>
<Text variant="h3">{p.name}</Text>
</Column>
</Row>
);
})}
</Container>
<MyFooter />
</EmailTemplate>
);
};
// Create template and defined meta
const ProductsTemplate = createTemplate(ProductsTemplateComponent, {
name: '/products/new',
generateMeta: (props) => ({
subject: `${props.products.length} new products!`,
}),
previewData: {
products: [
{ name: 'iPhone 4' },
{ name: 'iPhone 8' },
{ name: 'iPhone 16' },
],
},
});
export default ProductsTemplate; // Expose page to Nextjs
pages/api/[...email].ts:
import { createServer } from '@brail/core/server';
// Register template so it can be generated via API
export default createServer([ProductsTemplate]);
Then consume the emails via API, dynamically generating transactional content
curl -X POST --data <email_data> <host>/api/products/new | email-sender
Motivation
Brail was created so I never have to use a drag-and-drop editor again. It puts emails back into the "coding ecosystem" where theming, composition and dynamically generating content are standard. Version control? Git. Consistent theming and composition? React components. Vendor lock in? No thanks.
With brail, my emails are portable, consistent, easy and more fun to make.
Packages
@brail/core
Contains the underlying framework for creating and serving templates
@brail/react
Contains components which simplifies email markup, built on top of the MailJet Markup Language (MJML).
@brail/mjml
A fork of MJML providing browser compatibility, type safety and React bindings.
Author
Nick Sinclair
Distributed under the MIT license. See LICENSE for more information.
22k Jan 4, 2023
35 Dec 30, 2022
171 Dec 29, 2022
156 Dec 8, 2022
106.8k Jan 3, 2023
1.9k Dec 15, 2022
14.2k Dec 28, 2022
4.7k Dec 31, 2022
2k Jan 4, 2023
19 Aug 2, 2022