React Email

作者 vercel-labsfc2a696a50a3無授權條款18K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫昨天更新

React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.

精選僅含說明Software Development

AI 產生的概覽

使用 React Email 元件將 JSON 郵件規格算繪為 HTML 或純文字郵件。

功能: 此技能說明 @json-render/react-email，這是一個將 JSON 元素樹規格轉換為 HTML 或純文字郵件輸出的算繪器。內容涵蓋規格結構、使用 Zod 型別元件建立目錄與登錄檔，以及伺服器端算繪函式 renderToHtml 和 renderToPlainText。也列出用於結構、版面、內容與工具的标准元件，以及郵件用戶端相容性實務。
適用情境: 適用於從 JSON 規格建構交易型郵件或行銷郵件、定義郵件目錄，或算繪 AI 生成的郵件規格。當使用者提到 react-email、HTML 郵件或交易型郵件時也可使用。
執行需求: 需要在 JavaScript 或 TypeScript 專案中安裝 @json-render/react-email 套件，以及 @json-render/core、@react-email/components、@react-email/render 和 zod。此技能不附帶指令碼，僅為說明文件。

@json-render/react-email

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

Quick Start

typescript

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);

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);

Spec Structure (Element Tree)

Same flat element tree as @json-render/react: root key plus elements map. Root must be Html; children of Html should be Head and Body. Use Container (e.g. max-width 600px) inside Body for client-safe layout.

Creating a Catalog and Registry

typescript

import { defineCatalog } from "@json-render/core";import { schema, defineRegistry, renderToHtml } from "@json-render/react-email";import { standardComponentDefinitions } from "@json-render/react-email/catalog";import { Container, Heading, Text } from "@react-email/components";import { z } from "zod";
const catalog = defineCatalog(schema, {  components: {    ...standardComponentDefinitions,    Alert: {      props: z.object({        message: z.string(),        variant: z.enum(["info", "success", "warning"]).nullable(),      }),      slots: [],      description: "A highlighted message block",    },  },  actions: {},});
const { registry } = defineRegistry(catalog, {  components: {    Alert: ({ props }) => (      <Container style={{ padding: 16, backgroundColor: "#eff6ff", borderRadius: 8 }}>        <Text style={{ margin: 0 }}>{props.message}</Text>      </Container>    ),  },});
const html = await renderToHtml(spec, { registry });

import { defineCatalog } from "@json-render/core";import { schema, defineRegistry, renderToHtml } from "@json-render/react-email";import { standardComponentDefinitions } from "@json-render/react-email/catalog";import { Container, Heading, Text } from "@react-email/components";import { z } from "zod";
const catalog = defineCatalog(schema, {  components: {    ...standardComponentDefinitions,    Alert: {      props: z.object({        message: z.string(),        variant: z.enum(["info", "success", "warning"]).nullable(),      }),      slots: [],      description: "A highlighted message block",    },  },  actions: {},});
const { registry } = defineRegistry(catalog, {  components: {    Alert: ({ props }) => (      <Container style={{ padding: 16, backgroundColor: "#eff6ff", borderRadius: 8 }}>        <Text style={{ margin: 0 }}>{props.message}</Text>      </Container>    ),  },});
const html = await renderToHtml(spec, { registry });

Server-Side Render APIs

RenderOptions: registry, includeStandard (default true), state (for $state / $cond).

Visibility and State

Supports visible conditions, $state, $cond, repeat (repeat.statePath), nested repeat paths with { "$item": "field" }, and the same expression syntax as @json-render/react. Use state in RenderOptions when rendering server-side so expressions resolve.

Server-Safe Import

Import schema and catalog without React or @react-email/components:

Key Exports

Export	Purpose
`defineRegistry`	Create type-safe component registry from catalog
`Renderer`	Render spec in browser (e.g. preview); use with `JSONUIProvider` for state/actions
`createRenderer`	Standalone renderer component with state/actions/validation
`renderToHtml`	Server: spec to HTML string
`renderToPlainText`	Server: spec to plain-text string
`schema`	Email element schema
`standardComponents`	Pre-built component implementations
`standardComponentDefinitions`	Catalog definitions (Zod props)

Sub-path Exports

Path	Purpose
`@json-render/react-email`	Full package
`@json-render/react-email/server`	Schema and catalog only (no React)
`@json-render/react-email/catalog`	Standard component definitions and types
`@json-render/react-email/render`	Render functions only

Standard Components

All components accept a style prop (object) for inline styles. Use inline styles for email client compatibility; avoid external CSS.

Document structure

Layout

Content

Component	Description
`Heading`	Heading text (as: h1–h6).
`Text`	Body text.
`Link`	Hyperlink (text, href).
`Button`	CTA link styled as button (text, href).
`Image`	Image from URL (src, alt, width, height).
`Hr`	Horizontal rule.

Utility

Email Best Practices

Keep width constrained (e.g. Container max-width 600px).
Use inline styles or React Email's style props; many clients strip <style> blocks.
Prefer table-based layout (Section, Row, Column) for broad client support.
Use absolute URLs for images; many clients block relative or cid: references in some contexts.
Test in multiple clients (Gmail, Outlook, Apple Mail); use a preview tool or Litmus-like service when possible.

來源與署名

來源：vercel-labs/json-render位於skills/react-email提交fc2a696

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Function	Purpose
`renderToHtml(spec, options?)`	Render spec to HTML email string
`renderToPlainText(spec, options?)`	Render spec to plain-text email string

Component	Description
`Container`	Constrain width (e.g. max-width 600px).
`Section`	Group content; table-based for compatibility.
`Row`	Horizontal row.
`Column`	Column in a Row; set width via style.

Component	Description
`Preview`	Inbox preview text (inside Html).
`Markdown`	Markdown content as email-safe HTML.

React Email

@json-render/react-email

Quick Start

Spec Structure (Element Tree)

Creating a Catalog and Registry

Server-Side Render APIs

Visibility and State

Server-Safe Import

Key Exports

Sub-path Exports

Standard Components

Document structure

Layout

Content

Utility

Email Best Practices

來源與署名

更多來自 vercel-labs/json-render 的技能

Remotion

Zustand

Svelte

Xstate

Solid

Vue

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices