React Email

This is a JSON-to-email renderer built on React Email. You define your email structure as a flat JSON spec with elements and props, then render it server-side to HTML or plain text. It's useful when you need to generate transactional emails from data, let AI build email templates from specs, or maintain email catalogs without writing JSX everywhere. The element tree model matches json-render/react, so you get the same conditional rendering and state expressions. Ships with standard components for everything from buttons to markdown, all using inline styles for email client compatibility. The server-safe import path lets you validate specs without pulling in React dependencies.

skills.sh installs: 1.4K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill react-email --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/react-email

React Email renderer that converts JSON specs into HTML or plain-text email output.

Quick Start

import { renderToHtml } from "@json-render/react-email";
import { schema, standardComponentDefinitions } from "@json-render/react-email";
import { defineCatalog } from "@json-render/core";

const catalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
});

const spec = {
  root: "html-1",
  elements: {
    "html-1": { type: "Html", props: { lang: "en", dir: "ltr" }, children: ["head-1", "body-1"] },
    "head-1": { type: "Head", props: {}, children: [] },
    "body-1": {
      type: "Body",
      props: { style: { backgroundColor: "#f6f9fc" } },
      children: ["container-1"],
    },
    "container-1": {
      type: "Container",
      props: { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" } },
      children: ["heading-1", "text-1"],
    },
    "heading-1": { type: "Heading", props: { text: "Welcome" }, children: [] },
    "text-1": { type: "Text", props: { text: "Thanks for signing up." }, children: [] },
  },
};

const html = await renderToHtml(spec);