一个开源的 React 可视化拖拽编辑器，可使用你自己的组件和数据构建页面。
1.3万1001TypeScriptMIT更新于 6天前
- Star
- 26,328
- Fork
- 4,653
- 未关闭 Issue
- 30
- 最近提交
- 17小时前
这是什么？
GrapesJS 是一个免费开源的网页构建框架，用于可视化地制作 HTML 模板，适用于网站、邮件和移动应用等场景。它主要设计为嵌入 CMS 中使用，让用户无需编码即可快速创建动态模板。模板由结构（HTML）、样式（CSS）和变量组成，变量在服务端替换后于客户端渲染。
编辑器包含区块管理器、样式管理器、图层管理器、代码查看器和资源管理器，支持本地与远程存储，并内置用于创建和管理组件的常用命令。项目可通过 npm、unpkg、CDNJS 或 Git 获取。
核心功能通过插件系统扩展，项目提供 React 封装，以及网页和邮件（MJML）构建预设，还有大量官方和社区插件，覆盖组件、存储和样式属性等方面。
核心功能
- 01拖拽式区块管理器，用于搭建页面结构
- 02样式管理器，可视化编辑组件 CSS
- 03图层管理器和代码查看器，便于检查模板
- 04资源管理器，用于管理图片等媒体文件
- 05支持本地和远程存储，保存模板
- 06插件系统，提供 React 封装以及网页和邮件构建预设
适用场景
- 为 CMS 添加可视化页面编辑器，让非开发人员也能制作模板
- 使用拖拽编辑器制作邮件通讯模板
- 在自有 Web 应用中构建无代码网站搭建工具
快速上手
- 1
通过 npm 安装 GrapesJS
npm i grapesjs - 2
按照 README 用法示例引入 CSS 和 JS 文件，创建容器 div 并调用初始化脚本
标签
常见问题
- grapesjs 是什么？
- 开源的网页构建框架，用于拖拽式搭建 HTML 模板和页面编辑器，无需编写代码。 GrapesJS 是一个免费开源的网页构建框架，用于可视化地制作 HTML 模板，适用于网站、邮件和移动应用等场景。它主要设计为嵌入 CMS 中使用，让用户无需编码即可快速创建动态模板。模板由结构（HTML）、样式（CSS）和变量组成，变量在服务端替换后于客户端渲染。
- grapesjs 可以免费使用吗？用的什么许可证？
- grapesjs 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。
- grapesjs 还在维护吗？
- 活跃维护中。grapesjs 最近一次提交是在 2026年10月21日。
- grapesjs 适合用来做什么？
- 为 CMS 添加可视化页面编辑器，让非开发人员也能制作模板 使用拖拽编辑器制作邮件通讯模板 在自有 Web 应用中构建无代码网站搭建工具
- grapesjs 怎么安装和运行？
- 通过 npm 安装 GrapesJS: npm i grapesjs 按照 README 用法示例引入 CSS 和 JS 文件，创建容器 div 并调用初始化脚本
- 在哪里获取 grapesjs？
- 源代码和安装说明在 GitHub 上：https://github.com/GrapesJS/grapesjs
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
Builder.io 可视化开发平台的开源monorepo，包含多框架 SDK、示例与starter项目。
88691170TypeScriptMIT更新于 16小时前
基于 Frappe 框架的低代码可视化建站工具，提供类 Figma 编辑器和一键发布功能。
2445564PythonMIT更新于 前天
一款开源可视化编辑器，可在浏览器中用 AI 辅助直接设计和编辑 Next.js + Tailwind 代码。
2.7万2792TypeScriptApache-2.0更新于 2个月前
开源可视化搭建工具，可拖拽你自己的 React 组件来构建应用和网站，并与现有代码库集成。
7124736TypeScriptMIT更新于 12小时前
一个现代、轻量的网页拖放工具包，核心与框架无关，并提供 React、Vue、Svelte、SolidJS 适配层。
1.8万927TypeScriptMIT更新于 7天前