构建拖拽式页面编辑器，就用GrapesJS

从左侧面板把区块拖进画布——或者先点区块，再点画布。直接在页面上改文字、调整间距与圆角，切换视口看布局如何自适应。这是交互的等比模型；真正的 GrapesJS 编辑器就在下一节。

GrapesJS 官方演示：右侧区块面板、中间画布、样式管理器和图层树。这里看到的一切都在开源核心里。

六个随核心一起提供的子系统，而在用户眼里它们只是一个动作。

GrapesJS 是一个自托管的开源编辑器框架，而不是一款托管的建站产品。正是这个区别，让它能装进别人的应用里。

底层是同一个编辑器内核，每一次只是针对不同的活儿做了不同的配置。

想要它的理由各不相同，但底下都是同一个问题：创建页面不该每次都得叫上开发。

页面编辑器不是一个功能，而是十几个必须彼此自洽的子系统——并且要在产品不断长大的过程中一直保持自洽。

去做你的产品——而不是又一个从零写起的页面编辑器。

哪一栏都不是白来的。差别在于哪部分工作是你的。

发布之所以留在你这一栏，是刻意为之：它必须贴合你的域名、你的 CDN 和你的发布流程。

GrapesJS 是你应用里的一层，而不是一个你要把用户交出去的平台。用户、内容和发布决定权都留在你手里。

关于把编辑器挂进现有应用的具体做法——iframe、路由、鉴权交接——请看 可嵌入页面编辑器指南

编辑器的设备管理器会在断点之间切换画布，在某个设备下设置的样式也只在该宽度生效。

让用户针对不同屏幕尺寸调整布局、间距、排版和显隐。至于页面在某台设备上最终如何呈现，仍取决于你交付的 HTML 和 CSS——编辑器控制的是规则，不是浏览器。

区块就是用户拖进来的起点。下面这些是大多数页面编辑器上线第一天就需要的板块类型——你可以基于区块管理器 API 自己实现，也可以装一个区块插件，直接得到完整面板。

• 首屏

  标题、辅助文案和一个主要操作。

• 页头

  标志与导航，在小屏上收成菜单。

• 功能

  用于陈述卖点的分栏，含图标、标题和文案。

• 价格

  套餐卡片，其中一档突出显示为推荐。

• 客户评价

  引言，配署名和头像。

• 图库

  由素材管理器填充的图片网格。

• 行动号召

  居中的单一行动召唤。

• 联系

  表单接到你指定的任意接口。

• 页脚

  链接分栏、法务文字和次级导航。

正是这个区别，决定了 GrapesJS 在你眼里是个建站玩具，还是一个可以拿来做产品的编辑器内核。

1. 区块
2. ↓组件
3. ↓自定义组件
4. ↓你的产品

因为自定义组件背后是你自己的代码，GrapesJS 编辑器能编辑那些通用建站工具根本没有概念的东西——接上你套餐数据的价格表、读取你商品目录的商品网格、提交到你接口的表单。

大多数用户并不想要一张白纸。给他们一组起步版式，并允许保存自己的——预设配置的是整个编辑器，模板给的是一个可以直接改的页面。

这些是版式类别，不是商品条目——是你会为自己的用户准备或精选的东西。真正可以安装的预设和模板管理器在下方插件区。

存储管理器是你 API 的客户端，而不是一项服务。把它指向你的接口，编辑器就会通过它们读写。

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

把 GrapesJS 接到你自己的后端，由你决定项目、页面、素材和用户如何存储。GJS.Market 出售的是插件——它不托管你的数据。

下面每一张卡片都是真实在售的条目——名称、价格和缩略图都实时来自商店，所以本页展示的内容不会和实际在售的东西对不上。

区块

扩充用户可拖拽的区块库。

浏览该分类

区块

Plugin Basic Blocks

最基础的一套版式元件——分栏、文本、图片、链接——让面板在第一天就不是空的。

免费查看插件

区块

Plugin Blocky for Tailwind CSS

基于 Tailwind 的区块库，适合设计体系已经用原子类表达的团队。

¥424.80查看插件

拖放体验

让这个动作本身更清晰、更精准。

浏览该分类

拖放

Placeholder 2.0 - Premium Drag Experience

更清晰的放置指示，用户松手之前就能看清区块会落在哪里。

¥712.80查看插件

间距

GrapesJS LayoutEnhancer: Precision Spacing Tool

可拖拽的外边距和内边距手柄，间距在画布上调，而不是在数字输入框里填。

¥352.80查看插件

模板

给用户现成的起点。

浏览该分类

预设

Webpage Preset

一套现成的网页编辑器配置——区块、面板和样式已经接好。

免费查看插件

模板

Templates Manager

让用户从已保存的模板开始，而不是空白画布，也能保存自己的模板。

¥280.80查看插件

可复用组件

板块只做一次，在多个页面复用。

浏览该分类

复用

Symbols

把一个板块变成可跨页复用的符号——改一处，所有实例跟着变。

免费查看插件

响应式

管理断点和分设备样式。

浏览该分类

响应式

Responsive Pack — Breakpoint Manager for GrapesJS

新增并管理断点，让用户按屏幕尺寸分别调整布局样式。

¥100.80查看插件

素材

扩展媒体管理与上传。

浏览该分类

素材

Grapesjs Cloudinary

把素材管理器指向 Cloudinary，上传直接进入正规的媒体流水线。

免费查看插件

上传

Grapesjs Uppy

由 Uppy 驱动的上传——拖入文件，带进度，支持断点续传。

免费查看插件

存储

扩展项目持久化与恢复。

浏览该分类

存储

Grapesjs Firebase Storage

在你还不想先写一个存储接口时，把项目持久化到 Firebase。

免费查看插件

自动保存

Autosave & Restore — Crash Recovery for GrapesJS

为进行中的工作保留可恢复的副本，关掉标签页也不会让用户丢掉页面。

¥86.40查看插件

页面

在一次编辑会话里管理多页项目。

浏览该分类

页面

Pages Manager

在一次编辑会话里管理多页项目，并提供可导航的页面列表。

¥180.00查看插件

导出

在内置 HTML/CSS 之外增加输出格式。

浏览该分类

导出

Export Zip

把做好的页面导出为可下载的 HTML 和 CSS 包。

免费查看插件

SEO 与无障碍

上线前先审一遍页面。

浏览该分类

SEO 与无障碍

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

在编辑器内审查页面，在发布前指出无障碍和 SEO 问题。

免费查看插件

AI

在画布上加入 AI 辅助创作。

浏览该分类

AI

Grapesjs GPT Plugin

通过一个基于 OpenAI 的命令，在画布上生成和改写内容。

免费查看插件

四套起步配置。每一套都是真实条目的组合，而不是打包商品——需要哪些装哪些，其余的略过。

价格实时来自商店。

两个文件，编辑器就出现在屏幕上。之后的一切都是配置。

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The editor core. Mount it on any container in your app.
const editor = grapesjs.init({
  container: '#editor',
});

// A block is what the user drags. A component is what it becomes
// on the canvas once dropped — and what your app can then control.
editor.BlockManager.add('pricing-table', {
  label: 'Pricing',
  category: 'Sections',
  content: { type: 'pricing-table' },
});

editor.DomComponents.addType('pricing-table', {
  model: {
    defaults: {
      // Lock the frame, let the user edit only what you allow.
      draggable: 'main, section',
      traits: ['plan', 'currency'],
    },
  },
});

1. 添加区块
2. →定制组件
3. →配置存储
4. →接上你的后端
5. →发布

从这里往后的工作都与产品相关：给用户哪些区块、注册哪些组件类型、项目存在哪里。

核心与框架无关——它挂载在一个 DOM 容器上。下面这些页面分别介绍各自的接法。

只列出能对照各项目已发布的包和文档核实的特征。各家的能力差异源于设计目标不同——Craft.js 刻意不带界面，Puck 以 React 为先，Builder.io 是托管平台。

许可证已于 2026-09-03 对照 npm 仓库核实：grapesjs 0.23.6 以 BSD-3-Clause 发布；@measured/puck、@craftjs/core 和 @builder.io/react 均以 MIT 发布。能力项依据各项目的公开文档整理——决策前请自行复核。

同一个编辑器内核，问题不同。如果下面某一条更贴近你的情况，就从那里开始。

从 GrapesJS 起步，定制编辑体验，再用你产品需要的插件扩展它。