Resend 官方出品，用 React 组件构建跨客户端兼容的 HTML 邮件模板，支持可视化编辑器嵌入与 Resend 发送集成
说明：
## 核心用法
React Email 是 Resend 推出的开源框架，允许开发者使用 React 组件语法编写 HTML 邮件模板，彻底解决传统邮件开发的维护难题。核心工作流：
1. **模板开发**：使用 `@react-email/components` 提供的语义化组件（Html、Head、Body、Container、Tailwind 等）构建邮件
2. **本地预览**：`npx create-email@latest` 创建项目后，`npm run dev` 启动 3000 端口预览服务，实时查看多客户端渲染效果
3. **渲染输出**：通过 `render()` 函数转换为 HTML 或纯文本，兼容任意邮件服务商
4. **可视化编辑**：可嵌入 `@react-email/editor`（基于 TipTap/ProseMirror）到自有应用，提供所见即所得的邮件编辑器
### 显著优点
– **开发体验现代化**：TypeScript 原生支持、组件复用、Tailwind CSS 样式（px 预设替代 rem）、热重载预览
– **跨客户端兼容性**：内置 600px 最大宽度约束、table 布局替代 flexbox/grid、自动处理 Outlook/Gmail 等客户端差异
– **生态闭环完整**：从模板开发（React Email）→ 可视化编辑（EmailEditor）→ 发送服务（Resend SDK）形成完整链路
– **可嵌入架构**：EmailEditor 作为 React 组件可集成到任意应用，支持主题定制、扩展插件、Inspector 侧边栏
– **安全可信**：MIT 协议、Resend 官方维护、GitHub 9K+ stars、零危险代码、S+ 安全评级
### 潜在缺点与局限性
– **技术栈绑定**：强依赖 React 生态，非 React 项目引入成本较高（需额外构建步骤）
– **样式约束严格**：不支持 CSS 媒体查询（sm:/md:）、dark/light 主题选择器、flexbox/grid 布局，复杂响应式需求受限
– **图片格式限制**：明确禁止 SVG/WEBP，需提前转换为 PNG/JPG 并托管至 CDN
– **文件大小限制**：Gmail 对超过 102KB 的邮件进行截断，需控制模板复杂度
– **编辑器依赖**：可视化编辑器需额外安装 `@react-email/editor`，增加 bundle 体积
### 适合人群
– 已有 React 技术栈的团队，希望统一前后端与邮件模板的技术选型
– SaaS 产品需要向用户提供内置邮件编辑功能（如营销自动化、通知模板定制）
– 对邮件客户端兼容性要求高、缺乏专业邮件开发经验的中小型团队
– 使用 Resend 作为邮件服务商，追求生态一体化体验的用户
### 常规风险
| 风险类别 | 说明 | 缓解措施 |
|———|——|———|
| 渲染一致性 | 邮件客户端 CSS 支持差异极大（参考 caniemail.com）| 严格遵循 Skill 中的组件规范，多客户端测试 |
| 图片失效 | 相对路径图片在生产环境 404 | 必询问用户生产 CDN 域名，使用 baseURL 条件渲染 |
| 变量注入误用 | 用户可能要求在 JSX 中写 `{{variable}}` | 强制解释此模式会使模板无效，引导使用 PreviewProps |
| 依赖版本漂移 | npm 包更新可能引入不兼容变更 | package.json 锁定确切版本，升级前测试 |
| API Key 泄露 | 生产环境发送需配置 Resend API Key | 仅通过环境变量注入，禁止硬编码 |
会员专属
