每月付 Contentful 49 美元，只为改几处文案和图片

它不是给你一个现成的建站工具，而是让你在自己写的 React 网站上，直接拖拽修改内容。

不用改一行业务逻辑，也不用求前端同事帮忙——你改标题、换图片、调按钮位置，就像用 Word 编辑文档一样自然。

对很多运营、产品、小团队老板来说，这才是真正能“用起来”的网页编辑器。

它替你省掉了什么

你可能正在为 React 项目买商业 CMS 或低代码后台：Contentful 每月起步 $49，Sanity 团队版 $99 起，Headless CMS 配套编辑界面往往要单独采购或定制开发。

数据全程不出你的服务器，连账号都不用注册。

这些服务默认把你锁在它们的架构里——改个字段要等 API 更新，加个组件得提工单。而 Puck 是个纯前端 React 组件，嵌进你现有的 Next.js 或 Vite 项目里，不碰后端，不走云服务。

价格直接砍到零。

它不接管你的路由、状态管理或数据获取方式。你用 SWR 还是 TanStack Query，用 Zustand 还是 Context API，完全不受影响。

编辑时所有操作都在浏览器内存中完成，没有中间代理层，也没有隐藏的 SDK 初始化逻辑。你看到的 JSON 就是你存进数据库的原始结构。

不需要配置 OAuth 登录、SSO 对接或角色权限系统，权限控制由你自己的登录态和 API 层决定，Puck 只负责把编辑结果交出来。

它能干什么

• 你在自己的 React 页面里嵌入一个 Puck 编辑器组件，然后定义哪些区块能拖拽（比如 Banner、产品卡片、FAQ 列表），它就只允许你动这些部分，其他逻辑和样式完全不动。
• 不需要额外部署后台系统。所有编辑结果只是 JSON 数据，存你自己的数据库或文件里，没有 SaaS 账号，没有订阅费，也没有隐藏的用量限制。
• 它不替代你写 React 的能力，而是把你已有的组件变成可编辑模块。比如你早写好的 ProductCard 组件，只要在 Puck 配置里声明它的字段和渲染方式，它立刻就能被拖进来编辑内容。
• 支持 Next.js App Router 的静态生成场景：编辑完的内容可以预渲染成 HTML，不依赖运行时 JS，加载快、SEO 友好，不像很多在线编辑器那样靠 iframe 或远程 iframe 加载。
• 官方提供了 npx create-puck-app 命令，选 next 或 react-router 模板，三分钟就能跑起一个带编辑后台的演示站，不用从零配 Webpack 或 TypeScript。
• 社区已有插件支持富文本、图片上传、颜色选择器等常见字段类型，你也可以自己写一个字段组件，比如「选微信公众号文章」或「插入内部知识库链接」，扩展方式就是写个 React 组件，没黑盒。
• 每个可编辑区块的字段类型都由你明确定义：text、number、boolean、select、image、array 等，字段名直接对应最终 JSON 的 key，没有抽象映射层。
• 编辑器右侧实时渲染区使用和线上环境一致的 CSS scope 和 layout 规则，避免“所见非所得”问题。你调的 margin、padding、字体大小，在发布后就是真实效果。

怎么开始用

1. 打开终端，运行 npx create-puck-app my-site，按提示选 next 模板，它会自动创建一个含编辑页和预览页的 Next.js 项目。
2. 进项目目录，执行 npm run dev，浏览器打开 http://localhost:3000/edit 就能看到可视化编辑界面，右边是实时预览。
3. 编辑完点「Publish」，数据会以 JSON 形式输出到控制台，下一步就是把这行 save 函数改成你自己的 API 调用或文件写入逻辑。
4. 在 Editor.jsx 中，找到 onPublish 属性，把它指向你封装好的提交函数，比如 onPublish={handleSubmitToCMS}，其中 handleSubmitToCMS 内部调用 fetch('/api/update-page', {...}) 即可。
5. 若你用的是静态站点，可以把 onPublish 改成写入本地 content.json 文件，再配合 Next.js 的 getStaticProps 读取，实现无数据库部署。

项目信息