Repository: puckeditor/puck

Stars: 12528

README.md Copy Chapter

<br /><br /><br />

<div align="center">

<a href="https://puckeditor.com?utm_source=readme&utm_medium=code&utm_campaign=repo&utm_contents=logo">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_White_RGB_j2rwgg.svg" height="100px" aria-label="Puck logo">
<img src="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_Black_RGB_dqsjag.svg" height="100px" aria-label="Puck logo">
</picture>
</a>

_The visual editor for React_

Documentation • Demo • Discord • Contributing

⭐️ Enjoying Puck? Please leave a star!

<br />


</div>

What is Puck? Copy Chapter

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 Copy Chapter

Install the package:

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

Render the editor:

// Editor.jsx
import { Puck } from "@puckeditor/core";
import "@puckeditor/core/puck.css";
// 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";
import "@puckeditor/core/puck.css";
export function Page() {
  return <Render config={config} data={data} />;
}

Recipes Copy Chapter

Use create-puck-app to quickly spin up a a pre-configured app based on our provided recipes:

npx create-puck-app my-app

Available recipes include:

- next: Next.js example, using App Router and static page generation
- remix: Remix Run v2 example, using dynamic routes at root-level
- react-router: React Router v7 app example, using dynamic routes to create pages at any level

Community Copy Chapter

- Discord server for discussions
- awesome-puck community repo for plugins, custom fields & more

Get support Copy Chapter

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 Copy Chapter

MIT © The Puck Contributors