The visual editor for React
Documentation • Demo • Discord • Contributing
⭐️ Enjoying Puck? Please leave a star!
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.
Quick start
Install the package:
npm i @puckeditor/core --save # or npx create-puck-app my-appRender the editor:
// Editor.jsx
import { Puck } from "@puckeditor/core";
// Create Puck component config
const config = {
components: {
HeadingBlock: {
fields: {
children: {
type: "text",
},
},
render: ({ children }) => {
return <h1>{children}</h1>;
},
},
},
};
// Describe the initial data
const initialData = {};
// Save the data to your database
const save = (data) => {};
// Render Puck editor
export function Editor() {
return <Puck config={config} data={initialData} onPublish={save} />;
}Render the page:
// Page.jsx
import { Render } from "@puckeditor/core";
export function Page() {
return <Render config={config} data={data} />;
}Recipes
Use create-puck-app to quickly spin up a a pre-configured app based on our provided recipes:
npx create-puck-app my-appAvailable recipes include:
- next: Next.js example, using App Router and static page generation
- react-router: React Router v7 app example, using dynamic routes to create pages at any level
Community
- Discord server for discussions
- awesome-puck community repo for plugins, custom fields & more
Get support
If you have any questions about Puck, please open a GitHub issue or join us on Discord.
Or book a discovery call for hands-on support and consultancy.
License
MIT © The Puck Contributors
