22k+
GrapesJS 星标
100+
插件选择
MIT
开源许可
10 年+
久经考验
用户上手第一天就能获得什么
可视化模板编排
拖拽区块、就地编辑文案，无需写代码即可创建可复用的版块。
响应式预览
在桌面端与移动端预览之间切换，在发送前发现布局问题。
品牌一致性
锁定徽标、配色和法律页脚，同时仍给客户保留创作自由。
安全协作
在你现有的账户体系内，控制谁可以编辑、审批和发布模板。
干净的导出流程
将生成的 HTML/CSS 自动送入你的 ESP、队列工作进程或营销活动服务。
没有授权陷阱
自托管并自由扩展，无需按席位收费的编辑器吞噬你的利润。
实施蓝图
查看 React 集成细节1. 挂载编辑器
创建一个客户端包装组件，并在 useEffect 中使用 newsletter 预设初始化 GrapesJS。
2. 同步内容状态
监听变更事件，将 HTML/CSS 作为草稿存入你的 API，实现自动保存与历史记录。
3. 加入团队权限
启用基于角色的发布机制，让营销人员负责编辑，管理员负责管理锁定的版块。
4. 规模化交付
将导出的模板推送到你的营销活动流程，并在正式发布前进行测试发送。
快速开始
这段入门代码示例可为你提供一个带实时导出钩子的可用 React 邮件编辑器。
React + GrapesJS 入门示例
import { useEffect, useRef } from 'react';
import grapesjs from 'grapesjs';
import grapesjsNewsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';
export default function EmailEditor({ onChange }) {
const editorRef = useRef(null);
useEffect(() => {
const editor = grapesjs.init({
container: editorRef.current,
plugins: [grapesjsNewsletter],
pluginsOpts: {
[grapesjsNewsletter]: {},
},
storageManager: false,
});
editor.on('change:changesCount', () => {
onChange?.({
html: editor.getHtml(),
css: editor.getCss(),
});
});
return () => editor.destroy();
}, []);
return <div ref={editorRef} style={{ height: '600px' }} />;
}推荐插件组合
先精简起步，再逐步加入客户呼声最高的功能。
🧩
邮件免费
MJML Newsletter Preset
React 即用型 MJML 邮件构建器
⚙️
React免费
React Email Wrapper
可直接嵌入的邮件编辑 React 组件
📦
区块免费
Email Block Library
页头、页脚、CTA 与内容区块
📤
导出免费
HTML Exporter
为任意 ESP 导出内联样式的 HTML
📱
界面免费
Responsive Preview
在手机、平板和桌面尺寸下测试
🌙
样式免费
Dark Mode Emails
自动支持深色模式媒体查询
决策矩阵：GrapesJS 对比 Unlayer
| 特性 | GrapesJS + GJS.Market | Unlayer（react-email-editor） |
|---|---|---|
| 开源 | ✓ MIT | ✗ 专有 |
| 定价 | 免费 | $149–$2,499/月 |
| MJML 支持 | ✓ | ✗ |
| 自托管 | ✓ | ✗ 仅托管 |
| 自定义区块 | 无限制 | 受限 |
| 白标 | ✓ 免费 | ✓ 仅付费套餐 |
高价值应用场景
邮件 SaaS
构建一款独立的邮件模板构建器作为 SaaS 产品，并采用订阅计费。
CRM 平台
在你的 CRM 中嵌入邮件设计器，让用户无需离开应用即可创建营销活动。
营销平台
为你的邮件营销工具加入模板编辑器，让用户自行设计简报。
团队上线前检查清单
✓
配置自动保存与模板版本管理
✓
设置品牌安全的锁定版块（页头/页脚/法律信息）
✓
测试 Gmail、Outlook 和 Apple Mail 的渲染效果
✓
在营销活动发布前建立审批流程
✓
跟踪区块使用情况分析，以优化默认设置
✓
为图片密集型模板准备备用文本