Templatical

构建美观且兼容性强的电子邮件模板一直是 Web 开发的痛点。传统的 HTML 表格布局繁琐，而商业拖拽编辑器（如 BeeFree, Unlayer）往往价格昂贵且难以深度定制。Templatical 是一个可直接用于生产的开源拖拽式邮件编辑器，只需单个函数调用即可嵌入任何 Web 应用。

它输出标准的 MJML，确保邮件在所有客户端（Outlook, Gmail, Apple Mail 等）完美渲染；同时提供完全可移植的 JSON 模板格式，让你轻松实现版本控制、存储和跨平台复用。

核心亮点：强大、灵活、开放

1. 真正的“带 API 数据源”自定义块

• 动态内容：注册自定义块类型，其内容可在预览时从你的 API 实时获取。这在商业编辑器中通常是付费高级功能，而在 Templatical 中完全开源。
• 场景示例：在编辑器中直接预览“最新推荐商品”或“用户个人仪表盘摘要”，无需发送测试邮件。

2. 可插拔语法的合并标签 (Merge Tags)

• 多语法支持：原生支持 {{handlebars}}, {liquid}, ${js} 或自定义语法。
• 可视化替换：在画布中自动将代码标签显示为可读名称（如 {{user.name}} 显示为 “用户姓名”）。
• CRM 集成：几分钟内即可构建适配 Salesforce, HubSpot 等 CRM 系统的标签选择器。

3. 实时显示条件与预览

• 动态可见性：基于收件人属性（如 VIP 状态、地理位置）设置块的显示/隐藏规则。
• 即时反馈：在编辑器中切换不同用户画像，实时预览邮件呈现效果，确保个性化内容准确无误。

4. 完整主题系统与样式隔离

• 设计 Token：通过 27 个 OKLch Token、自定义字体和暗色模式配置，一次性定义品牌规范。
• Tailwind 4 + tpl: 前缀：采用 scoped 样式策略，无预飞行重置，彻底防止样式泄漏到你的主应用中。
• 自动继承：新模板和新块自动应用品牌主题，保持视觉一致性。

5. 框架无关，随处嵌入

• 底层 Vue 3：编辑器核心基于 Vue 3 构建，但提供 React, Svelte, Angular, 原生 JS 的一流封装。
• 即插即用：仅需 init() 和 unmount() 两个调用，无复杂依赖冲突。

快速开始：三步嵌入编辑器

1. 安装依赖

npm install @templatical/editor @templatical/renderer

2. 初始化编辑器

import { init } from '@templatical/editor';
import '@templatical/editor/style.css';

const editor = await init({
  container: '#editor',
  onChange(content) {
    // content 是 JSON 格式，可存储、版本控制或发送到后端
    console.log('Template updated:', content);
  },
});

3. 渲染为 MJML

// 准备发送时，将 JSON 模板转换为 MJML
const mjml = await editor.toMjml();
// 随后使用 MJML 库或 API 转换为最终 HTML

<div id="editor" style="height: 100vh"></div>

生态系统与包结构

Templatical 采用模块化设计，各包独立发布，按需选用：

💡 关于许可证：

• FSL-1.1-MIT：编辑器核心包采用功能性源代码许可证 (FSL)，发布 2 年后自动转为 MIT。允许免费商用、自托管、修改，唯独禁止将其重新打包为直接竞争的邮件编辑器产品。
• MIT：渲染器、类型、导入器等辅助包完全开源，无限制。

未来展望：Templatical Cloud

正在开发中的 Cloud 层将提供以下企业级功能（代码已在 @templatical/core/cloud 中部分开放）：

• AI 增强：AI 重写文案、AI 聊天辅助设计。
• 协作功能：带块锁定的实时协作、评论、快照与版本历史。
• 测试与分发：测试邮件发送、多租户管理、无头 API。
• MCP 支持：集成 Model Context Protocol，赋能 AI 代理操作邮件模板。

适用场景

• SaaS 平台：为用户内置个性化的通知邮件编辑器。
• 营销自动化：构建支持动态内容和 A/B 测试的营销活动创建工具。
• CRM 系统：集成销售跟进邮件模板，支持合并标签和条件逻辑。
• 交易型邮件：确保订单确认、密码重置等关键邮件的品牌一致性与高送达率。