Puck：为 React 赋能的可视化编辑器，兼具 AI 超能力

你是否厌倦了在 React 项目中手动编写和调整 UI 组件，渴望一种所见即所得的开发体验？Puck 的出现，旨在彻底解决这个问题。它是一个基于 TypeScript 开发的开源、模块化 React 可视化编辑器，允许开发者通过直观的拖拽方式，利用自己的 React 组件快速构建页面和界面。

截至收录：
Puck项目stars数：11475
Puck项目forks数：791

Puck项目目录截图

Puck项目核心亮点

• 🧩 模块化与无供应商锁定：Puck 本身只是一个 React 组件，可以无缝集成到任何 React 环境（如 Next.js、Remix）。你完全掌控自己的数据和组件，没有平台依赖。
• 🎨 真正的“你的组件，你的规则”：编辑器直接使用你项目中已有的 React 组件。你可以为每个组件定义可编辑的字段（如文本、图片），实现深度定制。
• 🤖 集成 AI 超能力：项目描述强调其“AI superpowers”，预示着它能通过 AI 辅助完成内容生成、布局建议等智能操作，提升编辑效率。
• ⚡ 快速启动与丰富生态：提供 create-puck-app 脚手架工具，能基于多种流行框架（Next.js, Remix, React Router）一键生成预配置项目。社区还维护着包含插件和自定义字段的生态库。

Puck项目快速开始

只需几步，你就能在本地运行起 Puck：
1. 安装：
bash
# 使用脚手架快速创建应用（推荐）
$ npx create-puck-app my-app
# 或单独安装核心包
$ npm i @puckeditor/core --save

1. 配置并渲染编辑器：
   “`jsx
   // Editor.jsx
   import { Puck } from “@puckeditor/core”;
   import “@puckeditor/core/puck.css”;

   // 定义你的组件配置
   const config = {
   components: {
   MyHeading: {
   fields: { title: { type: “text” } }, // 定义可编辑字段
   render: ({ title }) =>

   {title}

   , // 关联你的React组件
   },
   },
   };

   export function Editor() {
   return console.log(data)} />;
   }
   “`

2. 渲染最终页面：
   “`jsx
   // Page.jsx
   import { Render } from “@puckeditor/core”;

   export function Page({ data }) {
   return ;
   }
   “`

Puck项目应用场景

• 内容管理系统（CMS）：为营销或内容团队构建一个友好的后台界面，让他们能自由拖拽组件来创建和更新营销页面、博客文章布局。
• 内部工具和仪表盘：快速原型化和搭建数据可视化管理后台，开发者和产品经理可以直接调整看板布局。
• 低代码平台：作为核心编辑器，赋能业务人员或客户在限定组件范围内自行搭建应用界面。
• 组件库演示与调试：为你的设计系统或组件库提供一个可视化的“游乐场”，方便测试和展示组件在不同配置下的表现。

Puck项目链接

puckeditor / puck项目地址：https://github.com/puckeditor/puck

本文地址：https://www.tgoos.com/45206