puckeditor/puck

Что это?

Ключевые возможности

• 01Редактирование методом drag-and-drop на основе собственных React-компонентов.
• 02В конфигурации компонентов задаются редактируемые поля и результат рендеринга.
• 03Редактор выдаёт обычный JSON, который можно хранить в собственной базе данных.
• 04Отдельный компонент Render отображает сохранённые страницы.
• 05Работает с Next.js и другими средами React.
• 06Стартовые шаблоны доступны через create-puck-app.

Сценарии использования

• Создание лендингов на основе существующей дизайн-системы силами сотрудников без навыков разработки.
• Добавление конструктора страниц в рабочий процесс управления контентом на React или Next.js.
• Создание внутренних инструментов, в которых маркетинговые команды редактируют макеты без кода.

Быстрый старт

1. 1

   Установите пакет

   npm i @puckeditor/core --save
2. 2

   Отобразите редактор с помощью компонента Puck и config

3. 3

   Отобразите опубликованную страницу с помощью компонента Render

Что важно знать

• !Требуется проект React; это компонент React, а не отдельное приложение.

Темы

Частые вопросы

Что такое puck?

Модульный редактор с открытым исходным кодом для визуального создания страниц в React методом drag-and-drop — на основе ваших компонентов и данных. Puck — визуальный редактор для React.js, с которым можно собирать страницы методом drag-and-drop из компонентов собственного приложения. Он поставляется как React-компонент, поэтому его можно встроить в существующее React-приложение; он также работает с такими средами, как Next.js.

puck можно использовать бесплатно? Какая у него лицензия?

puck распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

puck всё ещё поддерживается?

Активно поддерживается. Последний коммит в puck — 16 окт. 2026 г..

Для чего можно использовать puck?

Создание лендингов на основе существующей дизайн-системы силами сотрудников без навыков разработки. Добавление конструктора страниц в рабочий процесс управления контентом на React или Next.js. Создание внутренних инструментов, в которых маркетинговые команды редактируют макеты без кода.

Как установить puck?

Установите пакет: npm i @puckeditor/core --save Отобразите редактор с помощью компонента Puck и config Отобразите опубликованную страницу с помощью компонента Render

Где скачать puck?

Исходный код и инструкции по установке — на GitHub: https://github.com/puckeditor/puck