Docs
Introduction

Introduction

Welcome to the Puck documentation!

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.

Main Features

FeatureDescription
Component ConfigurationIntegrate your own components with Puck by providing render functions and configuring fields that map to your props.
Root ConfigurationCustomize the root component that wraps all other Puck components.
Multi-column LayoutsUse DropZones to build more multi-column layouts by nesting components.
CategoriesGroup your components in the side bar.
Dynamic PropsDynamically set props after user input and mark fields as read-only
Dynamic FieldsDynamically set fields based on user input
External Data SourcesLoad content from a third-party CMS or other data source
Server ComponentsOpt-in support for React Server Components
Data MigrationMigrate between breaking Puck releases and your own breaking prop changes
ViewportsPreview and edit your content in a same-origin iframe to simulate different viewports
Feature TogglingToggle Puck features, like duplication or deletion, via the permissions API.

Join our Community

If you have any questions about Puck, please join us on GitHub (opens in a new tab) or Discord (opens in a new tab).

Hire the Puck Team

Puck is developed and maintained by Measured, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.

If you need support integrating Puck or creating a beautiful component library, please reach out via our website (opens in a new tab).

License

Puck is licensed under MIT.