GrapesJS + MJML

用 GrapesJS 搭建属于自己的邮件编辑器

以可视化方式配合 MJML 创建响应式邮件，导出可直接投产的 HTML，并把模板、数据与集成全部留在你自己的基础设施中。

开始使用 GrapesJS 浏览邮件插件
开源BSD-3-Clause 内核通过 grapesjs-mjml 支持 MJML自托管$0 平台费

26k+

GitHub 星标

100+

GJS.Market 上的插件

10 年

持续开发

$0

永久授权费用

为什么要自建

邮件编辑器是十几个子系统，而不只是一块画布

拖拽区块是大家最先想到的部分。真正消耗研发排期的，是画布背后的一切——无论你是在 CRM、电商平台还是营销 SaaS 中加入邮件功能，这份清单都是一样的。

画布背后有什么

  • 响应式布局引擎
  • CSS 内联
  • Outlook 条件注释标记
  • 深色模式变体
  • 合并标签与个性化
  • 退订与偏好设置链接
  • 图片托管与追踪像素
  • 模板版本管理
  • 草稿与自动保存状态
  • 角色与权限规则
  • 交付给服务商
  • 跨客户端渲染测试

自己从头开发编辑器

数月

  • 上述每个子系统都归你维护
  • 邮件的各种怪癖都会进入你的排期
  • 每个新区块都是一次研发投入
  • 维护工作永无止境
  • 这些都不是你的产品本身

从 GrapesJS 起步

数天

  • 画布、区块与样式管理器已经就绪
  • MJML 负责邮件特有的标记
  • 插件覆盖存储、素材与导出
  • 你只需扩展，而非从零创造
  • 团队可以专注于围绕它的产品

你的邮件编辑器应当围绕你的产品运转，而不是反过来。

为什么选择 MJML

为什么邮件要用 MJML？

邮件 HTML 的行为和网页 HTML 完全不同。MJML 是一门专为邮件设计的标记语言：你编写语义化组件，它的编译器输出邮件客户端所期望的表格化、样式内联的 HTML。正是它让一个可视化编辑器成为邮件编辑器。

面向邮件的组件

区段、分栏、按钮和分隔线本身就是组件，因此你拖到画布上的区块，映射到的是为邮件而写的标记，而不是为浏览器而写的标记。

编译产出的响应式布局

分栏堆叠与媒体查询由编译器生成，不必在每个模板里手工维护。

样式自动内联

编译步骤会内联 CSS，这正是大多数邮件客户端所需要的。你无需在流程中再接一个独立的内联工具。

更合理的编写层

MJML 源码可读、可比对，因此模板改动的评审方式更接近代码评审，而不是面对层层嵌套的表格。

最终仍然是普通 HTML

输出就是普通 HTML。任何能发送 HTML 邮件的系统都能发送它——发送时不依赖 MJML。

两端都是开源的

mjml 采用 MIT 许可；把它引入 GrapesJS 的 grapesjs-mjml 插件采用 BSD-3-Clause 许可。两者都不收取授权费。

MJML 与原生 HTML 对比

编译器替你完成了哪些工作

两条路径最终都产出 HTML。区别在于：邮件特有的工作有多少需要你手工维护，又有多少在每次保存时自动生成。

关注点MJML手写 HTML
响应式布局由组件自动生成每个模板手工维护
面向邮件的组件语言本身提供需要自行构建与维护
CSS 内联编译步骤的一部分流程中的独立工具
客户端怪癖在编译器中统一处理在每个模板中分别处理
编写体验语义化标记，差异清晰可读嵌套表格，评审困难
可视化编辑组件能干净地映射为区块每个区块都需要更多映射工作
输出HTMLHTML

MJML 旨在简化面向主流邮件客户端的响应式邮件开发。它省去了一类工作，但并不能免除对实际发送内容进行测试的必要。

产出链路

你的邮件编辑器会产出什么？

编辑器会产出三种成果物，各司其职。分清它们，架构决策也就完成了大半。

  1. 阶段 01

    可视化编辑器

    用户在画布上排布区块。编辑器自身的项目状态是 JSON——保存它，邮件之后才能被重新打开并继续编辑。

    editor.getProjectData()

  2. 阶段 02

    MJML

    编写层的表示形式。可读、可比对；当你想看清模板两个版本之间到底改了什么时，应该纳入版本管理的正是它。

    editor.runCommand('mjml-code')

  3. 阶段 03

    响应式 HTML

    编译后的表格化、样式内联的输出。这是你实际传输的成果物，也是发送基础设施唯一需要理解的东西。

    editor.runCommand('mjml-code-to-html')

  4. 阶段 04

    你的 ESP 或 API

    投递始终在你这一侧。任何接受 HTML 的服务商或自建服务都能发送它，使用你自己的凭据和发信域名。

    POST /your-api/campaigns/:id/send
GrapesJS 负责可视化编辑层。用户、模板、数据、存储与投递都由你的应用掌控。
归属权

你的邮件编辑器。你的数据。你的基础设施。

编辑器只是其中一层。邮件业务中真正敏感的资产——订阅名单、发信域名、你长期积累的域名信誉——都留在原来的位置。

你的产品

  • 营销活动与排期
  • 订阅名单与分群
  • 发信域名与 DKIM

GrapesJS 邮件编辑器

  • 画布与区块
  • MJML 组件
  • 样式管理器
  • 邮件区块
  • 模板管理器
  • 素材上传
浏览邮件插件

你的基础设施

  • 你的数据库
  • 你的媒体存储
  • 你的服务商凭据
这张图中没有任何一处需要第三方来保管你的模板或收件人。

关于如何把编辑器嵌入现有应用（包括鉴权与 iframe 策略）的具体做法： 查看可嵌入页面编辑器指南

在线演示

先看看 GrapesJS 邮件编辑器，再决定动手

由 GrapesJS 项目发布的新闻邮件编辑器演示。只有你主动点击时才会加载，在此之前不会给页面带来任何负担。

在新标签页中打开

来自 grapesjs.com 的开源新闻邮件编辑器演示——拖动区块、编辑内容并导出 HTML。

grapesjs.com/demo-newsletter-editor.html免费

将从 grapesjs.com 加载外部演示

演示由 GrapesJS 项目托管，展示的是核心编辑体验，不包含本页下方列出的插件。

工作流

从模板到已发送的邮件

  1. 1
    第 1 步

    选择模板

    用户从已保存的模板开始，而不是空白画布。模板就是你数据库里的一行记录，因此谁能看到哪些模板由你决定。

  2. 2
    第 2 步

    可视化编辑

    拖动区块、就地编辑文字、在样式管理器中调整样式。编辑器承载的是 MJML 组件，因此每一次修改都仍在邮件安全的标记范围内。

  3. 3
    第 3 步

    保存草稿

    通过存储管理器把项目 JSON 持久化到你自己的 API。自动保存、草稿与版本历史是你应用的行为，而不是编辑器的行为。

  4. 4
    第 4 步

    预览与测试

    渲染编译后的 HTML 供审阅，并通过你的服务商发送测试邮件。逐客户端的渲染测试是需要你自行加入的能力，并非内置功能。

  5. 5
    第 5 步

    导出 HTML

    把 MJML 编译为样式内联的 HTML。与 JSON 和 MJML 一并保存，你就永远清楚实际发出去的是什么。

  6. 6
    第 6 步

    发送并追踪

    把 HTML 交给你的 ESP 或自建发送服务。打开、点击与退信数据经由该服务商回流到你的报表中。

第 1、3、4、6 步属于你的应用。GrapesJS 与 MJML 负责第 2 步和第 5 步——而这恰恰是原本要花上数月的部分。

应用场景

你可以构建什么？

同一套基础，面向不同产品。每一种都是编辑器加上你自己的存储、权限与投递。

邮件营销 SaaS

在产品内为客户提供可视化的营销活动编辑器，而不是让他们从别处粘贴 HTML。

了解拖拽式方案

CRM

让销售与客户成功团队自行创建和调整外发邮件，无需再向研发提工单。

了解模板管理

营销自动化

用用户已经熟悉的同一个编辑器，编写生命周期与滴灌流程所发送的邮件。

了解 React 实现

电商

促销推送、订单确认和购物车挽回邮件，全部基于同一套区块库和你自己的品牌规范。

了解 SaaS 架构

SaaS 用户引导

引导、激活与留存邮件，产品团队无需发版即可修改。

浏览邮件插件

代理机构

为每个客户提供可复用的品牌化邮件体系，运行在你可控的基础设施上，而不是按席位付费的平台上。

了解白标方案
为什么选择 GrapesJS

为什么用 GrapesJS 做邮件编辑器？

GrapesJS 是一个编辑器框架，而不是一个托管产品。正是这个区别，让它能够成为你的邮件编辑器，而不只是摆在旁边的工具。

开源

内核以 BSD-3-Clause 许可发布，可免费用于商业用途。你可以阅读它、fork 它，并把它装进付费产品中。

自托管

编辑器运行在你自己的应用内部。用户与他们的模板之间不存在第三方。

可扩展

区块、组件、命令与面板都是扩展点。自定义邮件区块是一个插件，而不需要 fork 整个项目。

支持 MJML

由 GrapesJS 组织维护的 grapesjs-mjml，把 MJML 组件作为一等公民区块引入编辑器。

界面可定制

面板、图标与主题都可以改，让编辑器看起来像产品的一部分，而不是嵌进来的外部工具。

插件生态

GJS.Market 上的 100+ 个插件覆盖存储、素材、区块与导出，让周边工作大多变成一次采购而非一个迭代。

阅读 GrapesJS 教程
GrapesJS 与托管型邮件编辑器对比

GrapesJS、Unlayer 与 Stripo 对比

Unlayer 和 Stripo 是托管的、有商业支持的产品，对许多团队来说这是正确的取舍。这张表比较的是你掌控什么、支付什么，而不是哪个编辑器更好。

关注点GrapesJSUnlayerStripo Plugin
源码公开且开源是 — BSD-3-ClauseNot publicly documentedNot publicly documented
免费额度编辑器全部功能，$0免费方案，$0免费方案，$0
付费方案没有 — 插件为一次性购买$250/mo / $750/mo / $2,000/mo$100/mo / $550/mo
自托管编辑器始终如此 — 它运行在你的应用中企业版支持本地部署企业版支持自托管服务端组件
以 MJML 作为编写层是 — grapesjs-mjmlNot publicly documentedNot publicly documented
模板存在自己的数据库中是 — 存储层由你实现取决于方案与部署方式取决于方案与部署方式

上述厂商的方案名称与价格于 2026-08-27 读取自厂商官方定价页面，随时可能变动——在据此做预算之前，请先核对来源。 来源： Unlayer 定价 · Stripo Plugin. “Not publicly documented”表示厂商未公开说明该项，并不代表该能力不存在。

阅读完整的 GrapesJS 与 Unlayer 对比
插件生态

用 GJS.Market 插件扩展你的邮件编辑器

下面每一项都是真实在售的产品，价格实时同步。它们共同覆盖了画布周边的各层——预设、区块、存储、素材与导出。

MJML 与预设

起点：一个已经为邮件配置好的编辑器。

浏览该分类
MJML PresetMJML

MJML Preset

把 MJML 组件引入编辑器，让画布产出的是邮件标记而非网页标记。

免费查看插件
Newsletter Preset预设

Newsletter Preset

面向新闻邮件的编辑器配置，适合不需要 MJML 编译步骤时作为起点。

免费查看插件

区块与模板

现成的版块，以及组织它们的模板层。

浏览该分类
GrapesJS Email Blocky – Premium Responsive Email Blocks区块

GrapesJS Email Blocky – Premium Responsive Email Blocks

一套高级响应式邮件区块，让你的第一个模板变成排列组合而不是从头搭建。

¥496.80查看插件
Templates Manager模板

Templates Manager

为编辑器加上模板层——保存、列出并重新打开用户所依赖的版式。

¥280.80查看插件

编辑器扩展

为需要直接接触标记的人准备的额外编辑界面。

浏览该分类
Grapesjs Component Code Editor代码

Grapesjs Component Code Editor

按组件编辑代码，应对需要有人直接接触标记的场景。

免费查看插件

存储

把项目 JSON 与模板元数据持久化到你选择的地方。

浏览该分类
Grapesjs Firebase Storage存储

Grapesjs Firebase Storage

把编辑器项目持久化到 Firebase，省去先写一个存储接口的步骤。

免费查看插件
Directus Storage存储

Directus Storage

通过 Directus 存储项目，让模板与你的其余内容模型放在一起。

免费查看插件

图片与上传

邮件里的图片必须托管在你能掌控的地方。

浏览该分类
Grapesjs Cloudinary素材

Grapesjs Cloudinary

把图片选择接入 Cloudinary，邮件图片在你自己的账户下托管与转换。

免费查看插件
Grapesjs Uppy上传

Grapesjs Uppy

为素材管理器加入上传流程，方便团队把自己的图片放进邮件。

免费查看插件

导出

把产出从编辑器带进你的流程。

浏览该分类
Export Zip导出

Export Zip

把编辑器产出导出为可下载的压缩包，便于交付或归档。

免费查看插件
浏览全部邮件插件
推荐组合

搭建你需要的邮件编辑器组合

基于上述插件的四种组合。它们都是起点——任何一层，只要你已有自己的实现，都可以替换掉。

价格实时取自目录，可能会变动。

团队通常从这里开始

从一封现成的邮件开始

六种形态基本覆盖了最先要做的内容。请把它们当作你自建区块库的需求说明，而不是一份商品目录。

欢迎邮件

注册后的第一封信。一个明确的下一步动作、尽量少的装饰，并且内容在一周后延迟送达时依然说得通。

新闻邮件

结构重复——页眉、一串内容条目、页脚。它最能受益于可复用区块，因为每一期都要重新搭一遍。

产品更新

功能公告与版本说明。通常是一个头图、两三个条目区块，再加上一个回到产品的链接。

促销邮件

以优惠为主导的版式：强烈的头图、商品行和醒目的行动号召。这也是营销团队最常改动的模板。

事务性邮件

收据、确认与通知。数据密集、大多由系统生成，也是最需要合并标签与锁定区域的一类。

唤回邮件

面向不活跃用户的挽回邮件，通常会把偏好设置与退订链接放在比平时更显眼的位置。

浏览新闻邮件预设

以上是常见邮件类型的说明，并非在售商品。请从上面的预设起步，把它们做成你自己的区块。

输出格式

三种成果物，三种用途

最值得避免的错误是只保存 HTML：它恰恰是唯一无法可靠地再次编辑的表示形式。

JSON

保存与恢复项目

编辑器自身的项目状态。保存它，用户才能原样重新打开一封邮件。这是存储管理器写入的成果物。

MJML

编写层的表示形式

可读的标记，评审与比对方式都接近代码。当你需要的是模板改动历史而不是一堆二进制块时，纳入版本管理的应该是它。

HTML

真正发送出去的内容

编译后、表格化、样式内联。把它交给发送基础设施，并原样存档一份实际发出的副本备查。

output.jsJS
editor.getProjectData();                // JSON - you store this
editor.runCommand('mjml-code');         // MJML - you version this
editor.runCommand('mjml-code-to-html'); // HTML - you send this

三者都要保存。JSON 让邮件保持可编辑，MJML 让它保持可评审，HTML 让它保持可发送。

实施蓝图

如何搭建一个邮件编辑器

  1. 1
    01

    编辑器

    从 GrapesJS 和 MJML 插件开始。到这一步，你已经有了可用的邮件画布，并且能够产出 HTML。

  2. 2
    02

    模板与区块

    把现有邮件转化为可复用区块，并确定哪些区域允许用户编辑、哪些保持锁定。

  3. 3
    03

    存储

    把存储管理器指向你的 API。保存项目 JSON 以及模板元数据——归属人、名称、更新时间，凡是产品需要的都可以。

  4. 4
    04

    预览与校验

    渲染编译后的 HTML 供审阅，并在任何内容进入投递队列之前检查链接、图片与必填内容。

  5. 5
    05

    导出与投递

    编译为 HTML，交给你的 ESP 或自建发送服务，再把由此产生的指标回流到报表中。

阅读 GrapesJS 教程

第 1 步和第 5 步大体上已由本页列出的这些包解决。第 2 到 4 步，才是你产品真实需求所在。

快速开始

几分钟内开始构建

与框架无关的内核，加上官方 MJML 插件。如果你使用 React 或 Next.js，针对框架的接入方式见下方链接。

npm install grapesjs grapesjs-mjml
editor.jsJS
import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';

// The editor core plus the official MJML plugin. Both BSD-3-Clause.
const editor = grapesjs.init({
  container: '#email-editor',
  fromElement: true,
  plugins: [grapesjsMjml],
  pluginsOpts: {
    [grapesjsMjml]: {
      // Serve the drag-in placeholder from your own CDN, not a third party.
      imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
    },
  },
});

编辑器挂载完成后，三条命令即可得到三种成果物：

export.jsJS
// 1 - the MJML source the editor is currently holding.
const mjml = editor.runCommand('mjml-code');

// 2 - the compiled, table-based, CSS-inlined HTML you actually send.
const { html } = editor.runCommand('mjml-code-to-html');

// 3 - store all three; hand only the HTML to your sending provider.
await fetch(`/api/campaigns/${campaignId}/template`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    project: editor.getProjectData(), // re-openable in the editor
    mjml,                             // diffable source of truth
    html,                             // what your provider receives
  }),
});

如果你不想要编译步骤，新闻邮件预设是更早也更简单的路径——表格区块加 CSS 内联，不涉及 MJML：

newsletter.jsJS
import newsletter from 'grapesjs-preset-newsletter';

// The pre-MJML path: table blocks and a CSS inliner, no compile step.
const editor = grapesjs.init({
  container: '#email-editor',
  plugins: [newsletter],
  pluginsOpts: {
    'grapesjs-preset-newsletter': { inlineCss: true },
  },
});

const html = editor.runCommand('gjs-get-inlined-html');

版本已于 2026-08-27 核对：grapesjs 0.23.6、grapesjs-mjml 1.0.8、grapesjs-preset-newsletter 1.0.2。

GrapesJS 与 React React 邮件编辑器 Next.js 页面编辑器
自建还是采用

从零开发邮件编辑器，还是使用 GrapesJS？

问题很少是「你能不能做出一个编辑器」，而是「编辑器的哪些部分值得占用团队的时间」。

层次从零开发GrapesJS + GJS.Market
编辑器画布由你构建并维护开源内核，BSD-3-Clause
拖拽功能由你构建并维护内置
邮件标记客户端怪癖由你解决通过 grapesjs-mjml 使用 MJML
区块与组件每个区块都是研发投入现成插件，也可用同一套 API 自建
存储与素材由你构建并维护现成插件，或你自己的接口
后端、数据库与 ESP归你归你 — 保持不变
长期维护整个编辑器只维护你的扩展

去打造你的邮件产品——而不是又一个从零写起的邮件编辑器。

浏览邮件插件
产品价值

把邮件编辑变成产品功能

邮件编辑不只是一个工程决策。它所处的位置，会改变产品被使用的方式。

更少的研发需求

文案、图片和版式的日常修改不再以工单形式出现，因为想改的人自己就能改。

更完整的产品

邮件创建留在你的应用内部，用户不必再跳到另一个工具再跳回来。

高阶套餐的空间

高级编辑、模板库或品牌管控可以放进更高价位的方案，因为这项功能由你掌控，而不是转售他人的产品。

更强的留存理由

模板、品牌规范与历史记录都沉淀在你的平台里，让这里自然成为继续工作的地方。

可预期的成本

没有按席位或按发送量计费的平台费用横亘在你的增长与利润之间。

数据仍归你所有

收件人、模板与活动内容都存在你的数据库中，无论是合规问询还是日后迁移都更简单。

这些是团队努力实现的结果。我们不会发布未经我们实测的转化率或提效数字。

适合谁

为需要邮件编辑能力的团队而建

这个页面写给那些必须决定「邮件编辑是买、是租、还是自建」的人。

SaaS 创始人

先交付邮件编辑能力，而不必先为底层的编辑器基础设施买单。

CTO 与架构师

把数据模型、托管方式与投递路径都保留在你本就掌控的决策范围内。

产品团队

用你自己的交互设计把邮件做成原生功能，而不是一块嵌入的第三方界面。

开发者

在有文档的编辑器 API 之上扩展自定义区块、组件与命令。

电商团队

用一套区块库和一套品牌规范，同时支撑促销邮件与事务性邮件。

代理机构

为每个客户构建可复用的品牌化邮件体系，且无需承担按席位计费的平台成本。

定制开发

需要定制的邮件编辑器？

自定义区块、集成、存储、白标界面，或者一整套邮件编辑器实现——我们可以围绕你的产品来构建它，而不是把它摆在旁边。

聊聊你的邮件编辑器 查看全部服务
相关方案

在找更具体的内容？

本页讲的是把 GrapesJS 与 MJML 作为基础。以下页面覆盖相邻的问题。

React 邮件编辑器

同样的基础，接入 React 应用，并妥善处理组件生命周期。

在 React 中构建邮件编辑器

拖拽式邮件编辑器

编辑体验本身——你的非技术用户看到什么、用起来是什么感觉。

了解拖拽式邮件编辑

邮件模板编辑器

跨团队、跨活动地创建、保存与复用模板。

管理邮件模板

可嵌入页面编辑器

更普遍的场景：把任意类型的可视化编辑器嵌入 SaaS 产品。

嵌入可视化编辑器
常见问题

常见问题解答

开始吧

搭建属于自己的邮件编辑器

从 GrapesJS 和 MJML 起步，再按产品需要加入插件与集成。

从这里开始

浏览邮件插件

预设、区块、存储、素材与导出——都是真实在售、价格实时的产品。

浏览邮件插件
免费

从 GrapesJS 开始

安装开源内核与 MJML 插件，今天就能跑起一块邮件画布。

阅读教程
交给我们

需要定制开发？

自定义区块、集成，或者围绕你的产品构建一整套邮件编辑器。

聊聊你的项目

延伸阅读

面向 React 的邮件编辑器拖拽式邮件编辑邮件模板管理在 SaaS 中嵌入可视化编辑器为编辑器做白标面向 SaaS 产品的页面编辑器GrapesJS 与 ReactGrapesJS 与 Next.jsGrapesJS 与 Unlayer 对比新闻邮件与邮件插件实施服务