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.
Можно ли получить помощь вживую, помимо поддержки сообщества?Помимо создания задачи (issue) на GitHub или вопроса в 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