https://github.com/measuredco/puck

The visual editor for React
https://github.com/measuredco/puck

Last synced: 3 days ago
JSON representation

The visual editor for React

• Host: GitHub
• URL: https://github.com/measuredco/puck
• Owner: measuredco
• License: mit
• Created: 2023-06-02T12:23:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-28T17:57:48.000Z (11 days ago)
• Last Synced: 2025-01-28T20:09:21.780Z (11 days ago)
• Language: TypeScript
• Homepage: https://puckeditor.com
• Size: 2.76 MB
• Stars: 5,889
• Watchers: 40
• Forks: 363
• Open Issues: 139
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-react-components - puck - [demo](https://puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React (UI Components / Miscellaneous)
• fucking-awesome-react-components - puck - 🌎 [demo](puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React (UI Components / Miscellaneous)
• awesome-react - puck - The visual editor for React (**Awesome React** [](https://github.com/sindresorhus/awesome) / React)
• awesome-react-components - puck - [demo](https://puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React (UI Components / Miscellaneous)
• awesome-react-components - puck - [demo](https://puck-editor-demo.vercel.app/edit) - The self-hosted visual editor for React (UI Components / Miscellaneous)

README

        
# Puck

The visual editor for React.



  

    

  

  

    

  

  

    

  

  

    

  

 

    

  



## Demo

Visit https://demo.puckeditor.com/edit to try the demo.

## Documentation

Visit https://puckeditor.com to view the full documentation.

## Quick start

Install the package:

```sh

npm i @measured/puck --save # or npx create-puck-app my-app

```

Render the editor:

```jsx

// Editor.jsx

import { Puck } from "@measured/puck";

import "@measured/puck/puck.css";

// 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";

import "@measured/puck/puck.css";

export function Page() {

  return ;

}

```

## Recipes

Use `create-puck-app` to quickly spin up a a pre-configured app based on our provided [recipes](https://github.com/measuredco/puck/tree/main/recipes):

```sh

npx create-puck-app my-app

```

Available recipes include:

- [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js example, using App Router and static page generation

- [**remix**](https://github.com/measuredco/puck/tree/main/recipes/remix): Remix Run v2 example, using dynamic routes at root-level

## Community

- [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions

- [awesome-puck](https://github.com/measuredco/awesome-puck) community repo for plugins, custom fields & more

## Get support

If you have any questions about Puck, please open a [GitHub issue](https://github.com/measuredco/puck/issues) or join us on [Discord](https://discord.gg/D9e4E3MQVZ).

Or [book a discovery call](https://app.cal.com/chrisvxd/puck-enquiry/) for hands-on support and consultancy.

## License

MIT © [Measured Corporation Ltd](https://measured.co)