https://github.com/measuredco/puck Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions For + Enterprise + Teams + Startups + Education By Solution + CI/CD & Automation + DevOps + DevSecOps Resources + Customer Stories + White papers, Ebooks, Webinars + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} measuredco / puck Public * Notifications * Fork 15 * Star 865 The self-hosted drag and drop editor for React. puck-editor-demo.vercel.app/edit License MIT license 865 stars 15 forks Activity Star Notifications * Code * Issues 12 * Pull requests 1 * Discussions * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Discussions * Actions * Projects * Security * Insights measuredco/puck This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags Name already in use A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch? Cancel Create 4 branches 17 tags Code * Local * Codespaces * Clone HTTPS GitHub CLI [https://github.com/m] Use Git or checkout with SVN using the web URL. [gh repo clone measur] Work fast with our official CLI. Learn more about the CLI. * Open with GitHub Desktop * Download ZIP Sign In Required Please sign in to use Codespaces. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @chrisvxd chrisvxd fix: return component to original position when drag cancelled ... cae760f Aug 21, 2023 fix: return component to original position when drag cancelled Original implementation didn't work well with the CSS Grid gap property. cae760f Git stats * 252 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .github/workflows feat: release create-puck-app July 5, 2023 17:43 apps/demo feat: add headerTitle and headerPath APIs August 14, 2023 17:59 packages fix: return component to original position when drag cancelled August 21, 2023 17:48 recipes/next chore: reset next recipe using generator July 5, 2023 17:34 scripts release: v0.1.3 July 3, 2023 14:22 .eslintrc.js feat(create-turbo): create basic June 1, 2023 15:47 .gitignore feat: add "puck" package for distribution June 6, 2023 17:12 .npmrc feat(create-turbo): create basic June 1, 2023 15:47 .yarnrc build: add release tooling July 3, 2023 14:09 CHANGELOG.md release: v0.6.0 August 15, 2023 17:33 LICENSE docs: add LICENSE July 12, 2023 16:32 README.md docs: update demo URL in README.md August 15, 2023 12:23 lerna.json release: v0.6.0 August 15, 2023 17:33 package.json release: v0.6.0 August 15, 2023 17:33 turbo.json feat: add "puck" package for distribution June 6, 2023 17:12 yarn.lock build(deps): bump word-wrap from 1.2.3 to 1.2.5 August 16, 2023 11:40 View code [ ] puck Example Installation Recipes Plugins Official plugins Developing a plugin Example Reference Config Field Data Adaptor Plugin Hire the Puck team License README.md 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 Example Render the editor: // 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: // 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 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: 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: Analyze the heading outline of your page and be warned when you're 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 Here's a basic plugin that renders a "My plugin" heading in the root field area: 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): Data to render Config The Config object describes which components Puck should render, how they should render and which inputs are available to them. * root (object) + fields (object): o title (Field): Title of the content, typically used for the page title. o [fieldName] (Field): User defined fields, used to describe the input data stored in the root key. + render (Component): Render a React component at the root of your component tree. Useful for defining context providers. * components (object): Definitions for each of the components you want to show in the visual editor + [componentName] (object) o fields (Field): The Field objects describing the input data stored against this component. o render (Component): Render function for your React component. Receives props as defined in fields. o defaultProps (object [optional]): Default props to pass to your component. Will show in fields. Field A Field represents a user input field shown in the Puck interface. * type (text | textarea | number | select | radio | external | array): The input type to render * label (text [optional]): A label for the input. Will use the key if not provided. * arrayFields (object): Object describing sub-fields for items in an array input + [fieldName] (Field): The Field objects describing the input data for each item * getItemSummary ((object, number) => string [optional]): Function to get the name of each item when using the array or external field types * defaultItemProps (object [optional]): Default props to pass to each new item added, when using a array field type * options (object[]): array of items to render for select or radio inputs + label (string) + value (string | number | boolean) * adaptor (Adaptor): Content adaptor if using the external input type * adaptorParams (object): Paramaters passed to the adaptor Data The Data object stores the puck state. * root (object): + title (string): Title of the content, typically used for the page title + [prop] (string): User defined data from root fields * content (object[]): + type (string): Component name + props (object): o [prop] (string): User defined data from component fields Adaptor An Adaptor can be used to load content from an external content repository, like Strapi.js. * name (string): The human-readable name of the adaptor * fetchList ((adaptorParams: object) => object): Fetch a list of content and return an array NB Using an adaptor on the reserved field name _data will spread the resulting data over your object, and lock the overridden fields. Plugin Plugins that can be used to enhance Puck. * 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 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. License MIT (c) Measured Co. About The self-hosted drag and drop editor for React. puck-editor-demo.vercel.app/edit Resources Readme License MIT license Activity Stars 865 stars Watchers 9 watching Forks 15 forks Report repository Releases 17 tags Packages 0 No packages published Languages * TypeScript 81.7% * CSS 14.3% * JavaScript 3.7% * Handlebars 0.3% Footer (c) 2023 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time.