Install and configure puck

Follow the source instructions for puck. Read the prerequisites and configuration steps before running an example.

Quick start

Install the package:

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

Render the editor:

1// Editor.jsx
2import { Puck } from "@puckeditor/core";
3import "@puckeditor/core/puck.css";
4 
5// Create Puck component config
6const config = {
7  components: {
8    HeadingBlock: {
9      fields: {
10        children: {
11          type: "text",
12        },
13      },
14      render: ({ children }) => {
15        return <h1>{children}</h1>;
16      },
17    },
18  },
19};
20 
21// Describe the initial data
22const initialData = {};
23 
24// Save the data to your database
25const save = (data) => {};
26 
27// Render Puck editor
28export function Editor() {
29  return <Puck config={config} data={initialData} onPublish={save} />;
30}

Render the page:

1// Page.jsx
2import { Render } from "@puckeditor/core";
3import "@puckeditor/core/puck.css";
4 
5export function Page() {
6  return <Render config={config} data={data} />;
7}

Check the installation

After setup, continue with the first example. If a command fails, compare the runtime version, working directory, and required configuration with the original README before changing dependencies.

Source and help

• GitHub repository
• Original README
• Issues and existing reports
• Open the project website

The catalog identifies the license as MIT. Read the repository license before redistributing source or assets.

This catalog entry is a fork. The README may describe upstream packages, domains, or release procedures; those destinations do not establish a separate release of this fork.