解锁 React 开发新体验！Puck - 智能可视化编辑器

Puck：拥有AI强大的视觉编辑器

Puck是一款模块化、开源的视觉编辑器，专为React.js设计。它让开发者能够构建自定义的拖放体验，配合你自己的应用程序和React组件，轻松实现多样化的前端界面展示。

功能与特点

模块化设计

Puck作为一个React组件，能够在各种React.js环境中良好运行，包括Next.js。这种模块化的设计使得开发者可以根据需要进行灵活的扩展和定制，创建不同的组件和功能。

AI支持

Puck通过AI技术，为用户提供了友好的操作体验。用户可以通过拖放操作实时添加、排列和自定义组件，提升开发效率。

数据控制

使用Puck，你拥有自己的数据，不用担心受到供应商的锁定。所有的数据存储和处理完全在你的控制之下，使得开发者在构建应用时，更加放心。

MIT许可证

Puck采用的是MIT许可证，这意味着你可以将其用于内部系统和商业应用，而没有任何限制，确保了开发者的灵活性和自由度。

快速开始

安装Puck

在你的项目中，你可以通过以下命令轻松安装Puck：

npm i @puckeditor/core --save # 或使用 npx 创建Puck应用

渲染编辑器

通过以下代码块，你可以轻松渲染出Puck编辑器：

// Editor.jsx import { Puck } from "@puckeditor/core"; import "@puckeditor/core/puck.css"; // 创建Puck组件配置 const config = { components: { HeadingBlock: { fields: { children: { type: "text", }, }, render: ({ children }) => { return {children}; }, }, }, }; // 描述初始数据 const initialData = {}; // 保存数据到你的数据库 const save = (data) => {}; // 渲染Puck编辑器 export function Editor() { return <Puck config={config} initialData={initialData} onSave={save} />; }

渲染页面

接下来，使用下面的代码在页面中渲染Puck编辑器：

// Page.jsx import { Render } from "@puckeditor/core"; import "@puckeditor/core/puck.css"; export function Page() { return <Render />; }

使用实例

Puck还为开发者提供了一些预设的“食谱”，以帮助快速启动一个已配置好的应用。你只需运行以下命令，便能创建一个新的基于Puck的应用：

npx create-puck-app my-app

以下是可用的食谱示例：

next：包含Next.js示例，使用App Router和静态页面生成
remix：包含Remix Run v2示例，使用根级的动态路由
react-router：React Router v7应用示例，使用动态路由以在任何层级创建页面

[外链图片转存中…(img-LR2YmvKB-1768735141692)]

社区支持

想要与其他使用Puck的开发者交流，或获取支持，你可以加入我们的Discord社区。在这里，开发者们可以分享经验、讨论问题，并合作开发插件、定制字段及其它功能增强。

结语

Puck让前端开发变得更加高效与灵活，具备强大的拖放能力和数据控制，适合各种场景的应用开发。无论是内部系统还是商业项目，Puck都能提供极好的支持。