22k+
GitHub 星标
150k+
npm 周下载量
MIT
核心许可证
100+
生态插件
为什么团队为可视化编辑器选择开源
快速上线一款可用的编辑器
从开源内核加上经过验证的插件起步，无需从零开始构建拖拽功能。
保持对产品的完全掌控
自托管并自定义每一个面板、命令与存储行为，以契合你的工作流。
无需按席位计费即可扩展
在商业产品中使用 MIT 许可的 GrapesJS，仅为可选的高级插件付费。
掌控你自己的数据管线
将模板、页面与修订版本存储在你现有的 API 与基础设施中。
团队可遵循的实施计划
1
明确编辑器要解决的任务
落地页、邮件、模板，还是完整的 CMS 内容。先选定其一，避免过度构建。
2
安装 GrapesJS 核心
先在禁用存储的情况下初始化，待 UX 稳定后再接入你的 API。
3
只添加必要的插件
从区块、表单与导出开始。待首批用户验证工作流后再扩展。
4
梳理保存与发布流程
持久化 JSON 以及生成的 HTML/CSS，让非技术用户能即时发布。
5
追踪使用情况与错误
衡量插件采用率、失败命令以及发布延迟，为你的路线图提供依据。
选择最适合你的起步路径
开发者 4 步快速上手
1
安装核心包
为你的应用搭建基础编辑器依赖。
npm install grapesjs2
初始化编辑器画布
在进行自定义之前先渲染出可用的可视化画布。
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: false,
});3
启用来自 GJS.Market 的插件
在不让核心实现臃肿的前提下添加功能。
import myPlugin from 'grapesjs-my-plugin';
const editor = grapesjs.init({
container: '#gjs',
plugins: [myPlugin],
pluginsOpts: { [myPlugin]: { option: true } },
});4
接入保存与发布操作
将编辑器转化为可投入生产的发布工作流。
editor.Commands.add('publish-page', {
run: async (editorInstance) => {
const html = editorInstance.getHtml();
const css = editorInstance.getCss();
await fetch('/api/pages/publish', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ html, css }),
});
},
});按使用场景推荐的免费插件
预设免费
GrapesJS Preset Webpage
借助起步区块、面板与样式快速搭建完整页面。
适用于：营销页面
邮件免费
GrapesJS MJML
使用基于 MJML 的组件创建响应式邮件布局。
适用于：邮件营销
区块免费
GrapesJS Blocks Basic
添加基础内容区块，加速页面创建。
适用于：入门级编辑器
表单免费
GrapesJS Forms
提供拖拽式表单字段与表单模板。
适用于：线索收集
UI免费
GrapesJS Tooltip
通过情境化的引导与提示改善编辑器体验。
适用于：新手引导体验
导出免费
GrapesJS Export
将 HTML/CSS 输出导出到文件、剪贴板或 CI 工作流。
适用于：生产交付
GrapesJS 与其他开源构建器对比
| 特性 | GrapesJS | Webstudio | Silex | Webiny |
|---|---|---|---|---|
| 许可证 | MIT | AGPL-3.0 | GPL-3.0 | MIT（核心） |
| 自托管 | 支持 | 支持 | 支持 | 支持 |
| 插件系统 | 完整 API | 有限 | 有限 | 部分 |
| React 支持 | 通过封装 | 原生 | 不支持 | 原生 |
| 邮件构建器 | 支持（MJML） | 不支持 | 不支持 | 不支持 |
| 持续活跃开发 | 支持 | 支持 | 维护模式 | 支持 |
常见问题
相关指南
立即构建你的开源编辑器技术栈
从 GrapesJS 核心起步，添加聚焦的插件，交付一款用户能快速上手的可视化编辑器。
浏览 GrapesJS 插件