为真实产品团队设计的拖放式邮件构建器

现代视觉邮件编辑,使用 GrapesJS + MJML,完全由你的软件栈拥有

生产准备的电子邮件编辑

推出一个用户值得信赖的现代邮件生成器

将GrapesJS与MJML插件结合,实现拖放编辑、响应式输出,以及对模板、数据和集成的完全所有权。没有每次发送的平台税,没有隐藏的功能门槛,也没有锁定。

100%所有权

自托管架构与数据

MJML准备

主要客户端的响应式输出

API灵活

适用于任何ESP工作流程

快速返船

满足常见需求的插件生态系统

为什么使用GrapesJS来处理电子邮件——五个理由,而不是托管工具

没有按次发送收费

托管邮件构建器通常按发送的邮件或订阅者收费。有了GrapesJS,开发者完全归你所有——集成任何ESP,只为你发送的内容付费。

拥有你的数据

电子邮件模板、用户偏好和导出历史都会留在您的基础设施中。第三方无法访问你的模板或客户数据。

自定义方块

构建无限定制的品牌模块——产品卡、活动横幅、动态内容区——并完全控制HTML输出。

自托管

将邮件构建器部署到您自己的服务器、VPS或云环境中。没有依赖SaaS,没有价格层级变化,没有功能限制。

与任何API集成

直接连接Mailchimp、SendGrid、Postmark或您自己的电子邮件投递服务。GrapesJS 是中立的——输出是干净的 HTML 和 MJML。

这个建造者最适合谁

SaaS 产品团队

添加应用内模板编辑器,让客户无需工程支持即可设计生命周期、入职和营销邮件。

代理机构与制片厂

创建可重复使用的品牌模板系统,包含锁定部分、可编辑区域和可批准导出功能。

内部成长团队

通过预批准的模块、更安全的编辑限制和一致的响应输出,运行更快的活动。

MJML 集成——为什么它解决了电子邮件渲染问题

电子邮件HTML向来难以在客户之��准确传递。Gmail 会剥离某些 CSS 属性。Outlook 使用 Microsoft Word 的渲染引擎。Apple Mail 的处理方式又不同。结果是:开发者花费数小时调试基于表格的布局,而这些布局在某个客户端中看起来都存在缺陷。

MJML 通过提供一组语义组件——mj-section、mj-column、mj-text、mj-image——解决了这个问题,这些组件可以编译成经过实战考验的 HTML 表格布局。GrapesJS MJML 插件将这些组件映射到可拖拽的块上,为用户提供一个可视化编辑器,自动输出跨客户端响应式邮件 HTML。

Gmail 兼容性全套
Outlook 支持全(通过表格)
苹果邮件全套
移动响应式内置
干净的HTML输出是的

GrapesJS 电子邮件预设初始化

以下示例用新闻通讯预设插件初始化了GrapesJS,并演示如何从编辑器中检索HTML、CSS和MJML输出。

editor-setup.ts
import grapesjs from 'grapesjs';
import grapesjsNewsletterPlugin from 'grapesjs-preset-newsletter';
import { loadFunnelTranslations } from '@/lib/i18n-page';
import type { GetStaticProps } from 'next';
import { useTranslation } from 'next-i18next';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [grapesjsNewsletterPlugin],
  pluginsOpts: {
    [grapesjsNewsletterPlugin]: {
      // Newsletter plugin options
      modalLabelImport: 'Paste all your code here below and click import',
      modalLabelExport: 'Copy the code and use it wherever you want',
    },
  },
  storageManager: false,
});

// Get HTML output
const html = editor.getHtml();
const css = editor.getCss();

// Get MJML output (with MJML plugin)
const mjml = editor.runCommand('mjml-export');

在GJS上发送Builder插件。市场

电子邮件免费

GrapesJS MJML

基于MJML的响应式邮件模板,使用拖放功能

预设免费

通讯预设

预设的通讯块、版块和栏目布局

预览免费

电子邮件预览插件

跨桌面和移动视口预览邮件

动态免费

动态内容块

合并标签支持和条件内容块

出口免费

ESP 导出插件

直接导出模板到 Mailchimp、SendGrid 或 Postmark

CSS免费

HTML邮件内联

自动内联CSS,以实现最大邮件客户端兼容性

实用启动路线图

01 步

嵌入编辑器

在你的应用中使用 Mount GrapesJS,配合通讯和 MJML 插件,让用户可以从邮件安全的模块开始。

02 步

存储项目 JSON

Save editor.getProjectData() 用于自动保存、版本历史和跨会话恢复草稿。

03 步

导出和验证

编译成HTML/MJML,内联CSS,运行客户端预览,然后再交给你的ESP。

04 步

船舶集成

连接Mailchimp、SendGrid、Postmark或内部API,实现模板同步和活动工作流程。

电子邮件输出格式

HTML

最兼容

标准HTML输出带内联样式。兼容所有电子邮件客户端。使用 editor.getHtml() 和 editor.getCss() 来获取输出。

MJML

推荐阅读

MJML 是一种可编译为响应式 HTML 的标记语言。使用 GrapesJS MJML 插件,用户使用 MJML 组件构建并导出干净、客户端安全的 HTML。

JSON

用于存储

GrapesJS 将画布存储为 JSON 组件树。使用 editor.getProjectData() 在数据库中编程保存和恢复模板。

常见问题解答

准备好发布更优质的邮件构建体验了吗?

探索插件,将编辑器嵌入你的产品,启动一个团队和用户真正喜欢的工作流程。