https://github.com/puckeditor/puck
The visual editor for React
https://github.com/puckeditor/puck
Last synced: 11 months ago
JSON representation
The visual editor for React
- Host: GitHub
- URL: https://github.com/puckeditor/puck
- Owner: puckeditor
- License: mit
- Created: 2023-06-02T12:23:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-04T20:43:53.000Z (11 months ago)
- Last Synced: 2025-06-04T23:16:08.446Z (11 months ago)
- Language: TypeScript
- Homepage: https://puckeditor.com
- Size: 3.93 MB
- Stars: 6,758
- Watchers: 42
- Forks: 443
- Open Issues: 166
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-side-quests - puckeditor/puck - hostable visual page builder built on React — bring your own components, own your data (AI & LLM / LLM Apps & Interfaces)
- awesome-github-projects - puck - The visual editor for React. ⭐12,590 `TypeScript` 🔥 (🌐 Web Development - Frontend)
- StarryDivineSky - puckeditor/puck - **核心功能** - *模板化*：你先定义好页面结构（如 Hero、Cards 等），Puck 会按此结构生成对应的 MDX/React 代码。 - *提示驱动*：在命令行里输入主题或关键词，工具会把它们交给 OpenAI / Anthropic 等 LLM，让模型直接写出正文内容——段落标题、列表、图片描述等。 - **文件输出**：生成的 MDX 被 Node 脚本自动写入项目指定路径，并且在页面刷新后即能看到新的内容。 - **工作原理** 1. 命令 `puck generate pageName` 把你输入的 prompt（可通过环境变量或命令行参数）发送给 LLM。 2. 模型返回 Markdown+React 的代码片段。 3. 脚本把这段代码写成 MDX 文件，并更新到 Next.js 项目中。 - **使用方式** - 在项目根目录放置 `.env`，填入 `OPENAI_API_KEY=` 等键值即可。 - 运行 `pnpm i` 或者 `npm install` 安装依赖后，即可执行： ```bash puck init # 初始化模板文件 puck generate BlogPost --prompt "写一篇关于量子纠缠的技术博客" ``` - 命令行支持批量生成、重建等，配合 `pnpm run dev` 就能在浏览器中看到新页面。 - **项目特色** - *零配置*：只需填好 API key，即可立刻运行。 - *轻量级*：核心依赖只有 Next.js 与 MDX，体积不到 10 KB。 - *模板灵活*：你一次性定义页面结构，再次调用 AI 时只要提供关键词即可完成内容生成。 - **许可** Puck 遵用 MIT 协议，任何人都可免费使用、修改或扩展。 总之而言，Puck 是一把让网页构建更快捷、更自动化的钥匙：你写提示、它交给 AI 并返回代码；你放进 Next.js 项目，即能在几秒内得到完整页面。 (A01_文本生成_文本对话 / 大语言对话模型及数据)
- AiTreasureBox - puckeditor/puck - 11-03_9890_0](https://img.shields.io/github/stars/puckeditor/puck.svg)|The visual editor for React| (Repos)
- awesome - puckeditor/puck - The visual editor for React. (TypeScript)
README
# Puck
The visual editor for React.
## Demo
Visit https://demo.puckeditor.com/edit to try the demo.
## Documentation
Visit https://puckeditor.com to view the full documentation.
## Quick start
Install the package:
```sh
npm i @measured/puck --save # or npx create-puck-app my-app
```
Render the editor:
```jsx
// Editor.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";
// Create Puck component config
const config = {
components: {
HeadingBlock: {
fields: {
children: {
type: "text",
},
},
render: ({ children }) => {
return
{children}
;
},
},
},
};
// Describe the initial data
const initialData = {};
// Save the data to your database
const save = (data) => {};
// Render Puck editor
export function Editor() {
return ;
}
```
Render the page:
```jsx
// Page.jsx
import { Render } from "@measured/puck";
import "@measured/puck/puck.css";
export function Page() {
return ;
}
```
## Recipes
Use `create-puck-app` to quickly spin up a a pre-configured app based on our provided [recipes](https://github.com/measuredco/puck/tree/main/recipes):
```sh
npx create-puck-app my-app
```
Available recipes include:
- [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js example, using App Router and static page generation
- [**remix**](https://github.com/measuredco/puck/tree/main/recipes/remix): Remix Run v2 example, using dynamic routes at root-level
- [**react-router**](https://github.com/measuredco/puck/tree/main/recipes/react-router): React Router v7 app example, using dynamic routes to create pages at any level
## Community
- [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions
- [awesome-puck](https://github.com/measuredco/awesome-puck) community repo for plugins, custom fields & more
## Get support
If you have any questions about Puck, please open a [GitHub issue](https://github.com/measuredco/puck/issues) or join us on [Discord](https://discord.gg/D9e4E3MQVZ).
Or [book a discovery call](https://app.cal.com/chrisvxd/puck-enquiry/) for hands-on support and consultancy.
## License
MIT © [The Puck Contributors](https://github.com/measuredco/puck/graphs/contributors)