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 recieve breaking changes

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.

https://github.com/sinclairnick

GitHub

View Github