August 11, 2023

Brail - A framework built on NextJS for developing email templates in React

Brail



Brail

Quickstart   โ€ข   Docs   โ€ข   Examples

Brail provides batteries-included tooling for creating, generating and delivering HTML emails. With out-of-the-box email template correctness, ergonomic React templating and full-stack type-safety, never send an erroneous transactional (or marketing) email again.

What is Brail?

Brail consists of several tools which aid crafting and delivering emails, across the full-stack:

  • React Library: Responsive email component library. Compiles to email-compatible HTML
  • Brail Core: Tools for serving emails via type-safe APIs or SDKs
  • Devtools: Make email development, debugging and testing easier
  • Linting: Identify and fix common HTML email pitfalls

Features

Brail comes packed with many helpful features including:

  • ๐ŸŒˆ Theming out-of-the-box
  • ๐Ÿ“ฑ Automatic mobile-responsiveness
  • ๐Ÿ’ป Devtools and live-previews
  • โš ๏ธ Linting
  • ๐Ÿงข First-class tRPC, Zod integrations
  • ๐Ÿ”’ End-to-end type-safety

Getting started

To get started with Brail, check out the Quickstart guide.

Alternatively, you can check out the Docs, try Brail out in a codesandbox or use one of the Brail starter projects:




Why would I want to use Brail?

Handwriting emails using HTML is notoriously a pain. Unlike the web, email clients don't strongly adhere to a specific standard, resulting in limited and inconsistent support for CSS and HTML features.

Consequently, HTML emails become incredibly verbose, complex and littered with Microsoft Outlook-specific HTML comments, heavily nested

elements and esoteric CSS properties. As such, handwriting HTML email is an uncommon and tedious artform.

Brail abstracts away that complexity and aims to provide a web-like experience to writing emails, making it trivial to produce correct emails.


Why not use a drag-and-drop editor?

Drag and drop editors make it easy to create email-safe templates, but lack many features we're used to in code-world like theming, abstraction, formatting, maths, version control, PRs and types. By providing a full-proof in-code solution to HTML emails, we regain the control, flexibility and power of code, which makes creating (and refactoring) emails much faster, easier and more fun.