# puck The self-hosted, drag and drop editor for React. - 🖱️ **Drag and drop**: Visual editing for your existing React component library - 🌐 **Integrations**: Load your content from a 3rd party headless CMS - ✍️ **Inline editing**: Author content directly via puck for convenience - ⭐️ **No vendor lock-in**: Self-host or integrate with your existing application [See demo](https://puck-editor-demo.vercel.app/edit) -- ## Example Render the editor: ```jsx // Editor.jsx import { Puck } from @measured/puck; // 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; export function Page() { return ; } ``` -- ## Installation Install the package ``` npm i @measured/puck --save ``` Or generate a puck application using a recipe ```sh npx create-puck-app my-app ``` -- ## Recipes Puck is a React component that can be easily integrated into your existing application. We also provide helpful recipes for common use cases: - [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js app example -- ## Plugins Puck can be configured to work with plugins. Plugins can extend the functionality to support novel functionality. ### Official plugins - [`heading-analyzer`](https://github.com/measuredco/puck/tree/main/packages/plugin-heading-analyzer): Analyze the heading outline of your page and be warned when youre not respecting WCAG 2 accessiblity standards. ### Developing a plugin The plugin API follows a React paradigm. Each plugin passed to the Puck editor can provide three functions: - `renderRoot` (`Component`): Render the root node of the preview content - `renderRootFields` (`Component`): Render the root fields - `renderFields` (`Component`): Render the fields for the currently selected component Each render function receives the `children` prop, which you must render, and the `data` prop, which can be used to read the data model. #### Example Heres a basic plugin that renders a My plugin heading in the root field area: ```jsx const myPlugin = { renderRootFields: (props) => ( {props.children} My plugin ), }; ``` -- ## Reference ### `` The `` component renders the Puck editor. - **config** (`Config`): Puck component configuration - **data** (`Data`): Initial data to render - **onChange** (`(Data) => void` [optional]): Callback that triggers when the user makes a change - **onPublish** (`(Data) => void` [optional]): Callback that triggers when the user hits the Publish button - **renderHeader** (`Component` [optional]): Render function for overriding the Puck header component - **renderHeaderActions** (`Component` [optional]): Render function for overriding the Puck header actions. Use a fragment. - **headerTitle** (`string` [optional]): Set the title shown in the header title - **headerPath** (`string` [optional]): Set a path to show after the header title - **plugins** (`Plugin[]` [optional]): Array of plugins that can be used to enhance Puck ### `` The `` component renders user-facing UI using Puck data. - **config** (`Config`): Puck component configuration - **data** (`Data`)
