puck README

The project's README from github.com/puckeditor/puck. As one markdown file: README.md.




The visual editor for React

Documentation • Demo • Discord • Contributing

⭐️ Enjoying Puck? Please leave a star!


GIF showing a page being created in the Puck Editor, with components being added, arranged, and customized in real time

What is Puck?

Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components.

Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there’s no vendor lock-in.

Puck is also licensed under MIT, making it suitable for both internal systems and commercial applications.

Quick start

Install the package:

npm i @puckeditor/core --save # or npx create-puck-app my-app

Render the editor:

// Editor.jsx
import { Puck } from "@puckeditor/core";

// Create Puck component config
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

// Describe the initial data
const initialData = {};

// Save the data to your database
const save = (data) => {};

// Render Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

Render the page:

// Page.jsx
import { Render } from "@puckeditor/core";

export function Page() {
  return <Render config={config} data={data} />;
}

Recipes

Use create-puck-app to quickly spin up a a pre-configured app based on our provided recipes:

npx create-puck-app my-app

Available recipes include:

Community

Get support

If you have any questions about Puck, please open a GitHub issue or join us on Discord.

Or book a discovery call for hands-on support and consultancy.

License

MIT © The Puck Contributors

puck (puckeditor/puck)

Searching Database…

13.5K ·GitHub
Puck
这是什么？Puck 是一个模块化、开源的 React.js 可视化编辑器，让你可以用自己的 React 组件构建定制的拖拽式编辑体验。
Puck 是独立应用，还是我可以嵌入自己应用中的东西？它只是一个 React 组件，你在自己的应用中渲染它，而不是托管的 SaaS 服务或独立的编辑器应用，因此它可以在任何 React.js 环境中使用，包括 Next.js。
我该如何把 Puck 添加到 React 项目中？安装 Puck 包，然后渲染编辑器组件，并渲染生成的页面内容。如果想更快上手，可以使用 create-puck-app，根据某个模板生成一个预先配置好的应用。
使用它是否必须依赖 Next.js 或其他特定框架？不需要任何特定框架，Puck 可以在任何 React 环境中运行。针对 Next.js（App Router、静态生成）和 React Router v7 已有现成的模板。
用 Puck 创建的内容和数据归谁所有？数据归你所有，而且不存在供应商锁定，因为 Puck 只是一个你在自己应用中运行的库，而不是托管平台。
Puck 有插件生态吗？有。由社区维护的 awesome-puck 仓库收集了 Puck 的插件、自定义字段以及其他扩展。
除了社区支持，我还能获得更直接的帮助吗？除了在 GitHub 上提交 issue 或在 Discord 上提问，你还可以直接与维护者预约一次需求沟通电话，获取咨询服务。
在真实应用中试用 Puck 最快的方法是什么？运行 create-puck-app，使用提供的某个模板生成一个现成的项目，例如 Next.js App Router 示例或 React Router v7 示例。
我可以在哪里和其他用户讨论 Puck？有一个专门的 Discord 服务器，用于社区讨论和支持。
What are similar projects?grapesjs, mitosis, BlockNote, tiptap, plate, filament, illa-builder, editor.js
Which topics is it in?visual-editor, builder, nocode, internal-tools, wysiwyg, cms, drag-and-drop, low-code, no-code, node, editor, component-library
Creator
puckeditor
Size
8.7 MB
Stars
13.5K
Updated
CommitOct 15Releasev0.23.0Aug 07
Age
3y
Commits · 90 Days