puck README

The project's README from github.com/puckeditor/puck. As one markdown file: README.md.




The visual editor for React

Documentation • Demo • Discord • Contributing

⭐️ Enjoying Puck? Please leave a star!


GIF showing a page being created in the Puck Editor, with components being added, arranged, and customized in real time

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-app

Render 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-app

Available recipes include:

Community

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

puck (puckeditor/puck)

wysiwyg
Searching Database…

13.5K ·GitHub
Puck
What is this?Puck is a modular, open-source visual editor for React.js that lets you build custom drag-and-drop editing experiences using your own React components.
Is Puck a standalone app or something I embed in my own app?It is just a React component you render inside your own application, not a hosted SaaS or separate editor app — so it works in any React.js environment, including Next.js.
How do I add Puck to a React project?Install the Puck package, then render the editor component and render the resulting page content. For a faster start, use create-puck-app to scaffold a pre-configured app from a recipe.
Do I need Next.js or another specific framework to use it?No specific framework is required; Puck runs in any React setup. Ready-made recipes exist for Next.js (App Router, static generation) and React Router v7.
Who owns the content/data created with Puck?You own your data and there is no vendor lock-in, since Puck is just a library you run inside your own app rather than a hosted platform.
Does Puck have a plugin ecosystem?Yes — the community-run awesome-puck repo collects plugins, custom fields, and other extensions for Puck.
Can I get hands-on help beyond community support?Besides opening a GitHub issue or asking on Discord, you can book a discovery call directly with the maintainers for consultancy.
What's the fastest way to try Puck in a real app?Run create-puck-app to scaffold a ready project using one of the provided recipes, such as the Next.js App Router example or the React Router v7 example.
Where can I discuss Puck with other users?There is a dedicated Discord server for community discussion and support.
What are similar projects?grapesjs, mitosis, BlockNote, tiptap, plate, filament, illa-builder, editor.js
Which topics is it in?visual-editor, builder, nocode, internal-tools, wysiwyg, cms, drag-and-drop, low-code, no-code, node, editor, component-library
Creator
puckeditor
Size
8.7 MB
Stars
13.5K
Updated
CommitOct 15Releasev0.23.0Aug 07
Age
3y
Commits · 90 Days