MDX Editor

MDX Notes 是将 MDX（Markdown + JSX）同时用于笔记和微信公众号排版的跨平台工具，由个人开发者 maqibin 基于 Tauri 构建，安装包小于 10 MB。

它能做什么

MDX Notes 的核心能力围绕“一次书写，多端统一”展开，尤其针对微信公众号排版痛点设计。

• 一键复制到微信公众号：保留 MDX 组件渲染后的样式，无需手动调整格式
• 自定义组件与样式：熟悉 React 的用户可在 Config 标签页中注册自己的 JSX 组件
• 内置 10+ 主题与代码主题：切换排版风格无需额外 CSS
• 生成二维码：在文档内动态插入二维码，适合推广或资源链接
• 代码 diff 高亮：对比代码变更时自动着色，适合技术分享
• 生成文章目录与微信脚注：自动提取标题层级，脚注格式适配微信编辑器
• 文档格式化：一键整理 Markdown/MDX 书写规范
• 导出 Markdown / PDF：保留组件渲染结果或纯文本结构
• 对接 ChatGPT：通过 OpenAI 接口辅助写作，提升内容生成效率

适合谁用

目标用户覆盖两类人群：程序员可利用 React 自定义组件实现复杂排版；非程序员可直接套用内置模板，无需接触 JSX。

• 技术博主：用 MDX 在笔记中嵌入交互式组件（如代码沙盒、图表），并同步到公众号
• 公众号运营：解决 Markdown 无法直接排版微信文章的问题，减少复制后手动调整
• 开源爱好者：项目完全开源，可自行修改或贡献组件库

怎么上手

提供 Web 版和桌面版两种入口，桌面版基于 Tauri 开发，支持 macOS、Windows、Linux，安装程序小于 10 MB。

• Web 版：直接访问 https://editor.runjs.cool/ 即可使用，无需安装
• 桌面版：从官网下载对应系统安装包，离线使用且性能更优
• 模板起步：内置丰富模板，新手可选择后直接替换内容
• 自定义组件：在 Config 标签页中编写或导入 React 组件，实时预览效果

项目背景与生态

开发者 maqibin 因自身博客使用 MDX 书写，但无法满足微信排版需求而创建此项目。灵感来自 mdxjs playground。

• 灵感来源：mdxjs playground 的实时渲染方案
• 已获社区认可：被 JS酷、web技术学院、前端充电宝、云谦和他的朋友们等推荐
• 友情链接：md2card 国内版、vibe design 等排版工具

常见问题

Q1：MDX Notes 与普通 Markdown 编辑器有什么本质区别？

A1：MDX Notes 支持在 Markdown 中直接嵌入 React 组件（如二维码、diff 高亮、自定义样式），并针对微信公众号做了渲染适配，普通 Markdown 编辑器无法实现组件级排版。

Q2：不会 React 能用 MDX Notes 排版公众号吗？

A2：可以。MDX Notes 内置 10+ 主题和代码主题，以及丰富模板，非程序员可直接套用，无需编写 JSX。

Q3：MDX Notes 桌面版对系统有什么要求？

A3：桌面版基于 Tauri 构建，支持 macOS、Windows、Linux，安装程序小于 10 MB，运行轻量，无需额外依赖。

更多同类工具与网站,可在文档编辑分类继续挑选。

信息核实于 2026年7月,具体以官网为准。