我做了一个可视化邮件编辑器，因为我实在不想再手写邮件 HTML 了

举案
0 阅读5分钟

前段时间，我又一次碰到了那个熟悉的问题：

产品说，"这周要发一封营销邮件。"

看起来只是"做一封邮件"，但真正开始动手后，熟悉的痛苦很快就来了:

  • 页面在浏览器里看着没问题，到了邮箱客户端就开始变形
  • 一个按钮在这里正常，到了另一个客户端就偏移
  • 改一段文案很简单，但改完又担心把整个布局弄坏
  • 明明只是想快速出一版，最后却把时间花在了兼容性和重复调样式上

如果你也写过邮件模板，大概会明白这种感觉:

不是业务难，而是过程太折磨。

后来我开始更多使用 MJML。它确实帮我解决了不少底层问题，把那些难写、难维护、兼容性差的邮件 HTML 抽象成了更清晰的组件。

但新的问题又出现了:

MJML 很好用，但编辑体验依然不够顺手。

很多时候，我想要的是一种更自然的方式:

  • 能不能像搭页面一样去搭邮件？
  • 能不能拖一拖、改一改，就直接看到结果？
  • 能不能在可视化编辑和代码编辑之间自由切换？
  • 能不能做完之后，顺手就发一封测试邮件给自己？

于是，Mail Studio 就这样被做出来了。

它不是一个"又一个编辑器"，而是真正拿来即可用的工具

Mail Studio 是一个基于 MJML 和 Next.js 构建的现代化可视化邮件编辑器。

它的目标很明确:

把"写邮件模板"这件事，从一件痛苦的工程活，变成一件更直观、更顺手、更接近创作的事。

先放链接：

image.png

我希望它解决的，不只是"能写"，而是"写起来舒服"

为了做到这一点，我在第一个版本里先把几件我自己最在意的事做好了。

1. 可视化拖拽，而不是从空白代码开始

你可以直接通过拖拽来搭建邮件结构，而不是一上来就面对一整屏标签。

  • 布局组件：Section、Column、Group、Wrapper
  • 内容组件：Text、Image、Button、Divider、Spacer、Table
  • 交互组件：Accordion、Carousel、Navbar
  • 社交组件：社交图标和自定义链接

对于很多邮件场景来说，这种方式会比从零敲代码轻松很多。

2. 不同阶段，用不同视图

我不想把编辑体验做成只有一种模式，因为真正做东西的时候，人的需求是不断切换的。

所以目前支持四种模式：

  • Canvas：拖拽搭结构
  • Edit：聚焦内容编辑
  • Code：直接编辑 MJML
  • Preview：查看最终渲染效果

有时候你想像搭积木一样排版，有时候你又想精细调整代码，这两种方式不应该彼此对立。

3. 改了什么，马上能看到

邮件编辑最怕的一件事，就是改动没有反馈。

所以 Mail Studio 里做了实时预览和实时编译，让修改能尽快反馈到结果上。这样你不用反复切页面、反复猜效果，编辑会更连贯。

4. 对开发者友好，而不是只做一个"看起来能用"的可视化工具

我自己本质上还是希望它是一个开发者友好的产品，所以在第一版里也保留了很多我认为很重要的能力：

  • Monaco Editor 代码编辑体验
  • Undo / Redo 撤销重做
  • 键盘快捷键支持
  • 导出生产可用的 HTML
  • 直接发送测试邮件

也就是说，它不是只能"拖"，而是允许你在可视化和代码之间自由工作。

为什么我觉得这个方向值得做？

因为邮件这件事，其实一直都很重要。

无论是欢迎邮件、营销活动、产品通知，还是用户召回，邮件都还是很多产品链路里很核心的一环。

但有意思的是，大家每天都在用邮件，真正顺手的邮件编辑体验却并不多。

我一直觉得，这里面其实还有很多可以被重新设计的空间：

  • 更现代的交互
  • 更顺滑的编辑体验
  • 更低的上手成本
  • 更适合开发者和设计需求之间协作的方式

Mail Studio 第一个版本终于诞生。

这个版本已经能做什么？

目前你可以用它来：

  • 可视化搭建邮件模板
  • 直接编辑 MJML 代码
  • 实时预览渲染结果
  • 使用预设模板快速开始
  • 导出 HTML
  • 发送测试邮件

预置模板也已经有一些基础场景，比如：

  • 欢迎邮件
  • 新闻通讯
  • 营销推广
  • 账户通知

技术上，它是怎么做的？

第一版主要基于下面这些技术：

技术说明
Next.js 16React 全栈框架
React 19最新版 React
MJML响应式邮件框架
Tailwind CSS 4原子化 CSS
Zustand轻量级状态管理
dnd-kit现代拖拽库
Monaco EditorVS Code 编辑器核心
Radix UI无样式可访问组件

如果你也被邮件模板折磨过，欢迎来试试

项目已经开源。

如果你经常需要做邮件模板，或者你也对"可视化编辑 + MJML + 开发者体验"这个方向感兴趣，欢迎体验、提建议，或者直接参与贡献。

🚀 快速开始

git clone https://github.com/wzc520pyfm/mail-studio.git
cd mail-studio
pnpm install
pnpm dev

也可以直接在线体验：

最后

如果这篇文章刚好让你想起了那些被邮件 HTML 折磨的时刻，那也许你会理解，我为什么想认真把这件事做下去。

欢迎来试用，也欢迎告诉我，你最希望它下一步补上什么能力。

如果这个项目对你有帮助，欢迎点个 Star 支持一下。

链接汇总：

avatar
文章
阅读
粉丝