The static parts have a rich history powered by libraries like MJML, vendors like Mailchimp and open source raw HTML templates
The dynamic parts are steeped in template languages like liquid, handlebars, mustache and more.
Whole companies are dedicated to re-building emails using JSON as the storage layer.

The best part about emails is the HTML. Stop getting rid of it, and start building on it.

Write emails as HTML (or use any number of great starter templates)
Enhance the dynamic parts with React

Example

import React from "react";
import { render, useData } from "html-email-for-react";

const html = `
<html>
  <body>
    <my-component></my-component>
  </body>
</html>
`;

function MyComponent() {
  const { name } = useData();
  return <div>Hello {name}</div>;
}
// NOTE: Html components are CASE-InSeNsItIvE and React names are case sensitive
// So use lowercase component names (see customElements.define)
const components = {
  "my-component": MyComponent,
};
const data = {
  name: "Jorghan",
};
console.log(render(html, { components, data }));
/*
Returns:

<html>
  <body>
    <div>Hello Jorghan</div>
  </body>
</html>
*/

The great part of this is that it brings the portable web-component method of building components and allows you to build dynamic components using React.

More Examples

Inspiration

Inspired by StencilJS. I'd love to use Stencil components in emails directly, but email HTML is fickle and doesn't support custom web components.

Why not MJML?

MJML is a a great language, but it does too much and too little.

Too Much:

Requires the entire template to be written in MJML
Doesn't support progressive enhancement of templates by mixing in MJML into HTML

Too little:

Doesn't support passing data into nested components.
Requires a separate template language (Vue, Liquid, Handlebars, etc.) to render dynamic elements

Benefits of React HTML for Email

Uses the existing HTML tooling ecosystem.
Single system for rich components (React). Good for React-focused teams.
Modular: Render sub-templates and sub-components for parts of an email.

FAQs

What is html-email-for-react?

Is html-email-for-react popular?

Is html-email-for-react well maintained?

Package last updated on 21 Apr 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

html-email-for-react