GrapesJS + React

构建可用于生产环境的 React 页面构建器 —— 基于 GrapesJS

从开源的 GrapesJS 编辑器起步，需要时再从 GJS.Market 添加经过生产验证的插件、区块与集成。

用 GrapesJS 开始构建 浏览 React 插件
开源：核心为 BSD-3-Clause，React 封装为 MIT26k+ GitHub star100+ 个市场插件自托管 —— 数据与产物都归你兼容 React 与 Next.js
在线演示

看看你能构建出什么

三个真实的 GrapesJS 编辑器：免费的开源基线版，以及两个在 GJS.Market 上出售的生产级编辑器。选一个标签页加载，然后往画布上拖点东西试试。

全屏打开

基于 React、官方 React 封装和 shadcn/ui 构建的 GrapesJS 预设，编辑器界面本身就已经具备现代 React 应用的观感。这正是你原本要花上数月去自行设计的部分。

grapesjsshadcn.netlify.app高级

将在内嵌框架中加载 grapesjsshadcn.netlify.app。在你点击之前，不会运行任何第三方代码。

喜欢看到的效果吗？

在 GJS.Market 获取 shadcn/ui 编辑器

全屏演示查看插件

去构建你自己的编辑器，而不是从零重建编辑器基础设施。

真实成本

别把六个月花在搭建编辑器基础设施上

可视化编辑器不是一个功能，而是十四个必须彼此协调的子系统；每一个都藏着只有真实用户进来之后才会暴露的边界情况。

从零开始你需要自己构建的部分

  • 拖放
  • 组件
  • 区块
  • 样式管理器
  • 响应式编辑
  • 素材管理器
  • 撤销与重做
  • 存储
  • HTML 与 CSS 导出
  • 富文本编辑
  • 页面
  • 设备管理器
  • 插件架构
  • 编辑器界面

从零开始

3–6 个月以上

  • 一支专职的大型工程团队
  • 此后永无止境的维护
  • 只有在生产环境才发现的边界情况
  • 你真正的产品路线图被搁置

GrapesJS + GJS.Market

几分钟即可起步

  • 开源的编辑器内核
  • 其余部分用现成插件补齐
  • 自托管，没有厂商介入
  • 只扩展你的产品真正需要的部分

别重建编辑器，去打磨你的产品。

为什么选 GrapesJS

为什么用 GrapesJS 来构建？

它不是唯一的编辑器框架，但它是把控制权最大程度留给你的那一个。

开源

内核采用 BSD-3-Clause 许可，官方 React 封装采用 MIT 许可。两者都允许商业使用，而且全部由你自行托管。

框架友好

React、Next.js、Vue、Angular 以及原生 JavaScript。编辑器只是挂载到一个容器里，不会对周边技术栈指手画脚。

可用于生产

GrapesJS 自 2016 年起持续活跃开发，已被用作面向真实用户的可视化编辑器与建站工具的基础。

可扩展

组件、区块、面板、命令和存储都是可插拔的。你可以自己写一个，也可以直接装一个现成的。

没有厂商锁定

编辑器跑在你自己的服务器上，输出纯粹的 HTML 与 CSS 存进你的数据库。它不会向外回传任何数据，也不会因为某家厂商改了套餐就停止工作。

庞大的生态

GJS.Market 上有 100+ 个插件、预设与区块库，每个条目都附带兼容性说明、评价和安装指引。

深入了解 GrapesJS
计费方式

免费起步，只为你需要的部分付费

你不必为了一个可视化编辑器去买下一整套平台。引擎永久免费；你只需为那些原本要耗掉数月工程量的部分付费。

免费

GrapesJS

编辑器内核，采用 BSD-3-Clause 许可。包含画布、组件模型、样式引擎和撤销栈。

搭配
按插件付费

GJS.Market

高级插件、区块库、集成与进阶功能 —— 一次买一个，而不是订阅一整个平台。

得到
归你所有

你的产品

SaaS 页面构建器、建站工具、落地页构建器、邮件构建器、CMS 编辑器或内部工具。自托管，完全由你掌控。

浏览 GJS.Market 插件
使用场景

你要构建的是什么？

每种场景下编辑器内核都是同一个，真正不同的是叠在上面的插件组合。

SaaS 页面构建器

让你的客户在你的 SaaS 内部可视化地创建和编辑页面。

构建 SaaS 构建器

建站工具

为用户提供完整的可视化建站体验。

构建建站工具

落地页构建器

让市场人员不依赖开发者就能做出落地页。

构建落地页构建器

邮件构建器

制作可视化邮件模板，输出响应式且各家邮件客户端都能正确显示的结果。

构建邮件构建器

CMS / 内容编辑器

为你现有的 CMS 加上可视化内容编辑能力。

构建 CMS 编辑器

内部工具

为你自己的团队打造定制的可视化编辑器。

构建内部编辑器
快速上手

几分钟跑起你的第一个 React 编辑器

只要几行代码，就能得到一个可用的 GrapesJS React 编辑器。

安装

npm install grapesjs @grapesjs/react
Builder.tsxTSX
import GjsEditor from '@grapesjs/react';
import 'grapesjs/dist/css/grapes.min.css';

export default function Builder() {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        storageManager: false,
      }}
    />
  );
}
架构

搭建你的 React 编辑器技术栈

  1. 1
    第 1 层

    GrapesJS

    编辑器引擎：组件模型、画布、撤销栈、样式引擎与命令系统。

    GrapesJS 教程
  2. 2
    第 2 层

    @grapesjs/react

    官方 React 封装。一个组件即可挂载编辑器，应用的其余部分仍是普通的 React。

    React UI for GrapesJSReact 页面构建器
  3. 3
    第 3 层

    UI / 设计系统

    让编辑器界面贴合你的产品，而不是一副演示 demo 的样子。

    GrapesJS ShadcnGrapesJS presets
  4. 4
    第 4 层

    区块

    用户真正会往画布上拖的那些版块。

    Blocky for Tailwind CSSGrapesJS blocks
  5. 5
    第 5 层

    存储

    把项目 JSON 和渲染产物持久化到你自己的 API，并且在标签页崩溃后还能恢复。

    Autosave & RestoreGrapesJS storage plugins
  6. 6
    第 6 层

    页面

    管理多页项目，而不是一份长长的单页文档。

    GrapesJS Project ManagerGrapesJS web pages
  7. 7
    第 7 层

    导出

    把干净的 HTML 与 CSS 从编辑器导出，接入你的发布流程。

    GrapesJS 插件
  8. 8
    第 8 层

    你的 API 与数据库

    这是唯一没人能卖给你的一层，也正是值得你投入工程时间的地方。

浏览 GJS.Market 插件
插件生态

用插件搭出你的编辑器

React 团队最先会用到的八个插件。每张卡片都指向真实的商品页，价格、兼容性、评价和安装说明都在那里。

React UI for GrapesJSReact

React UI for GrapesJS

GrapesJS 团队出品的官方 React 封装。它以声明式的方式包装核心模块，让你用自己的 React 组件搭建编辑器界面。

免费查看插件
Reactor Preset for GrapesJSReact

Reactor Preset for GrapesJS

把你自己的 React 组件体系带进画布，让用户拖动的就是你早已在用的那些组件。

免费查看插件
GrapesJS Shadcn预设

GrapesJS Shadcn

用 React 与 shadcn/ui 构建的完整编辑器外壳，省下通常要花在设计和实现编辑器界面上的数月时间。

¥7,199.93查看插件
Plugin Blocky for Tailwind CSS区块

Plugin Blocky for Tailwind CSS

一套体量可观的预制响应式 Tailwind CSS 区块库，可直接拖到画布上。

¥424.80查看插件
Autosave & Restore — Crash Recovery for GrapesJS存储

Autosave & Restore — Crash Recovery for GrapesJS

为编辑器提供自动保存与恢复，让关掉的标签页或耗尽的电池不会让用户白干一小时。

¥86.40查看插件
Grapesjs Project Manager页面

Grapesjs Project Manager

项目、模板与页面管理，并内置存储管理器 —— 从单文档编辑走向真正的多页项目，这是最快的一条路。

免费查看插件
TinyMCE 8 Inline Text Editor富文本

TinyMCE 8 Inline Text Editor

用 TinyMCE 替换内置的富文本编辑器，带来行内编辑，并为块级与行内元素提供各自独立的工具栏。

¥496.80查看插件
Autofill — Dummy Content Filler for GrapesJSAI

Autofill — Dummy Content Filler for GrapesJS

一条命令即可用占位内容填满版面，空白画布再也不会卡住一场演示或设计评审。

¥64.80查看插件
浏览全部兼容 React 的插件
现成组合

需要一整套组合吗？

三种覆盖大多数产品的组合。每一套都是编辑器内核，加上把它变成特定工具所需的那几个插件。

价格实时读取自市场。

成本几何

构建一个 React 页面构建器要花多少钱？

诚实的计量单位是工程时间，而不是许可费。下面列出每个子系统自建与直接安装各自的代价。这些是用于估算范围的参考，不是报价。

子系统使用 GrapesJS从零自建
编辑器架构内核已内置在写下第一行界面代码前就要花上数周设计
拖放内核已内置数周起步，随后是数月的边界情况
样式管理器内核已内置每组属性都要数周
响应式控件内核提供，可用插件扩展数周，之后还要持续修补
区块与组件装一个区块库即可每个区块数天，而且永无止境
存储与自动保存装个插件，指向你的 API数周，还要加上崩溃恢复的工作
素材管理器内核已内置数周，还要处理上传与 CDN
测试与维护与社区共同分担长期的团队成本
用 GrapesJS 开始构建

用于估算范围的工程时间参考。具体数字取决于你的团队与需求。

备选方案

GrapesJS 对比 Puck、Craft.js 与 Builder.io

这里只列出我们能给出出处的事实。凡是无法对四款工具都完成核实的条目，我们宁可略去，也不去猜。

能力GrapesJSPuckCraft.jsBuilder.io
开源许可BSD-3-ClauseMITMIT专有
框架支持任意 —— React、Next.js、Vue、Angular、原生 JS仅 React仅 ReactReact、Next.js、Vue
自托管支持支持 —— 作为库运行在你的应用里支持 —— 作为库运行在你的应用里不支持 —— 托管式服务
插件市场GJS.Market，100+ 个插件无无内置集成
邮件构建器支持，通过预设不支持不支持不支持
计费模式免费，按插件付费免费免费付费套餐

核实于 2026-08-26。许可与框架方面的事实来自各项目自身的包元数据与官方文档。 逐项对比详情： GrapesJS 对比 Craft.js · Puck 编辑器替代方案 · GrapesJS 对比 Builder.io

被忽略的工作量

只面向 React 的编辑器库，会把哪些活留给你

Craft.js 和 Puck 给你的是一棵 React 拖放树。而人们对一个编辑器所期待的其余一切，仍然要你自己写。

编辑器子系统GrapesJSCraft.js / Puck
样式管理器内置需自行构建
设备管理器 / 响应式编辑内置需自行构建
素材管理器内置需自行构建
生态

为打造真实产品的开发者而生

本页没有客户 logo，也没有推荐语 —— 只有你自己就能核实的生态数据。

26k+

GitHub star

100+

GJS.Market 上的插件

10 years

持续活跃开发

$0

许可费，始终如此

Star 数取自 GitHub 上的 GrapesJS 仓库，插件数取自 GJS.Market 目录。两者均核实于 2026-08-26。

常见问题

常见问题解答

下一步

不必从零开始，也能建成你的 React 页面构建器

用开源的 GrapesJS 内核，装上你需要的插件，构建出你的产品真正需要的那个编辑器。

免费起步

开始构建

配置一个编辑器、挑一个预设，得到一套可以直接放进 React 应用的 GrapesJS 配置。

开始构建
扩展

浏览 GJS.Market 插件

区块、存储、页面、富文本、React 组件等等 —— 按需一个一个装。

浏览 GJS.Market 插件
获取帮助

需要 GrapesJS 集成方面的帮助？

如果你更愿意把集成交给做过同类项目的人，我们的服务正是为此准备的。

聊聊集成方案

继续阅读：

React 页面构建器Next.js 页面构建器React 邮件构建器GrapesJS 教程GrapesJS 与 TypeScript可嵌入的页面构建器GrapesJS 插件GrapesJS 集成服务