puckeditor/puck

这是什么？

核心功能

• 01基于你自己的 React 组件进行拖拽编辑。
• 02通过 config 定义组件的可编辑字段与渲染结果。
• 03编辑结果为普通 JSON 数据，可存入自有数据库。
• 04提供独立的 Render 组件用于展示已保存的页面。
• 05兼容 Next.js 等 React 环境。
• 06可通过 create-puck-app 快速生成示例项目。

适用场景

• 让非开发人员基于现有设计系统拼装落地页。
• 为 React 或 Next.js 内容管理流程添加页面搭建功能。
• 在内部工具中让运营人员无需写代码即可调整页面布局。

快速上手

1. 1

   安装软件包

   npm i @puckeditor/core --save
2. 2

   使用 Puck 组件和配置渲染编辑器

3. 3

   使用 Render 组件渲染已发布的页面

使用前须知

• !需要 React 项目环境，它是 React 组件而非独立应用。

标签

常见问题

puck 是什么？

一个开源的 React 可视化拖拽编辑器，可使用你自己的组件和数据构建页面。 Puck 是一个面向 React.js 的可视化编辑器，可以用你自己的应用组件搭建拖拽式页面。它以 React 组件的形式发布，能够嵌入现有的 React 应用，并兼容 Next.js 等环境。

puck 可以免费使用吗？用的什么许可证？

puck 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

puck 还在维护吗？

活跃维护中。puck 最近一次提交是在 2026年10月16日。

puck 适合用来做什么？

让非开发人员基于现有设计系统拼装落地页。 为 React 或 Next.js 内容管理流程添加页面搭建功能。 在内部工具中让运营人员无需写代码即可调整页面布局。

puck 怎么安装和运行？

安装软件包: npm i @puckeditor/core --save 使用 Puck 组件和配置渲染编辑器 使用 Render 组件渲染已发布的页面

在哪里获取 puck？

源代码和安装说明在 GitHub 上：https://github.com/puckeditor/puck