启动拖放式页面构建器，却不从零构建编辑器
GrapesJS 给你编辑器引擎和 GJS。Market提供插件构建模块，使您的团队能够在几天内交付适合生产的视觉体验，而非数月。
什么是拖放式页面构建器？
拖放页面构建器是一种基于网页的可视化编辑器，允许用户通过将预设内容块拖到画布上，而无需编码来设计网页。用户可以在实时预览输出时，排列版块、标题、图片、按钮和表单。
从工程角度看，构建器管理设计画布、块库、样式编辑器和序列化层，将视觉编辑转换为可移植的 HTML 和 CSS。GrapesJS 将所有这些都作为一个开源框架提供。
实施蓝图
定义模板和护栏
创建锁定模板和基于角色的控件，使用户能够更快地构建而不违反设计标准。
连接存储和资产
在后端持久化页面JSON和渲染的HTML/CSS，并通过API路由媒体上传。
构建草稿以发布工作流程
为管理多个页面和活动的团队添加预览、批准和发布状态。
跟踪采纳与质量
衡量模板使用情况和发布事件，以改善入职和编辑默认值。
为什么开发者选择 GrapesJS
开源且可扩展
用于商业或内部产品，完全控制源代码、架构和部署。
干净输出架构
生成结构化的HTML和CSS，而不是难以迁移的专有标记。
大型插件生态系统
用GJS。市场插件涵盖模块、存储、样式控制、导出以及框架专用工作流程。
框架无关的集成
通过稳定的基于容器的初始化模型，支持 React、Vue、Angular、Next.js 和原版 JS。
实战测试生产
它由成熟的社区支持，并在SaaS构建者、CMS工具和企业内容平台中得到了验证。
框架对比：GrapesJS vs Puck vs Craft.js vs Builder.io
| 特色 | 葡萄JS | 冰球 | Craft.js | Builder.io |
|---|---|---|---|---|
| 开源 | 是的（麻省理工学院） | 是的（麻省理工学院） | 是的（麻省理工学院） | 部分 |
| React 支持 | 是的 | 只用反应 | 只用反应 | 是的 |
| 插件生态系统 | 大型（GJS.市场） | 限量版 | 限量版 | 专有 |
| 所见即所得 | 是的 | 是的 | 是的 | 是的 |
| 电子邮件支持 | 是的（MJML） | 不 | 不 | 部分 |
| 自托管 | 是的 | 是的 | 是的 | 仅限企业号 |
流行插件
网页预设
着陆页和网站的完整模块集
自助式块
Bootstrap 5 网格和分量块
顺风阻挡
Tailwind CSS 驱动的块库
风格经理专业版
高级可视化 CSS 样式面板
多页面管理器
在一个编辑会话中管理多个页面
存储管理器
将编辑器状态持久化到 REST API 或 localStorage
导出HTML
一键导出干净的HTML/CSS
自定义代码块
在画布中插入任意的HTML、CSS或JS
高影响力应用场景
SaaS页面构建器
直接将可视化页面创建嵌入产品中，以加快客户内容发布速度。
无头CMS体验
将结构化内容模型与拖拽版面编辑相结合，服务于市场团队。
无代码营销工具
为非技术用户提供可重复使用的块，用于着陆页、促销和活动微型网站。
内部企业编辑
为文档、门户和内部沟通页面创建受控的创作环境。
发射清单
入门指南
先从 GitHub 上的 GrapesJS 核心开始，然后添加 GJS 的插件和预设。推广你的制作编辑器栈。
常见问题解答
准备好发售你的视觉构建器了吗？
从生产准备的插件开始，更快地启动你的页面构建体验。
浏览所有插件