https://github.com/measuredco/puck
The visual editor for React
https://github.com/measuredco/puck
Last synced: 6 months 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 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-05T10:15:21.000Z (6 months ago)
- Last Synced: 2025-05-06T01:15:01.228Z (6 months ago)
- Language: TypeScript
- Homepage: https://puckeditor.com
- Size: 4.13 MB
- Stars: 6,600
- Watchers: 41
- Forks: 421
- Open Issues: 162
-
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-devtools - puck - The self-hosted drag and drop editor for React. (Web Development and Tools / Sevelt Libraries)
- 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
- [**react-router**](https://github.com/measuredco/puck/tree/main/recipes/react-router): React Router v7 app example, using dynamic routes to create pages at any 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)