Run a first puck example

Start with the smallest workflow described by the README for puck. Complete installation and configuration first.

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}

Verify your changes

The root manifest provides this check:

1npm run test

Read any errors before continuing. Build and type checks verify source consistency; exercise the README example to verify the behavior you need.

Next task

Read the usage guide for the documented components, configuration, and source layout.

Source and help

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.