Config

The main configuration object describing what Puck can render.

const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

Params

Required params

components

An object describing the components available to Puck. Each component definition implements the ComponentConfig API.

const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

Optional params

root

An object describing the root of your component tree. This component wraps the rest of your components. Implements the ComponentConfig API.

• You must return children to render the internal Puck DropZone.

const config = {
  root: {
    render: ({ children }) => {
      return <div>{children}</div>;
    },
  },
  // ...
};

categories

An object describing categories for your components. Will be used to group the components in the left side-bar.

const config = {
  categories: {
    typography: {
      components: ["HeadingBlock"],
    },
  },
  // ...
};

categories[key].components

An array of components in this category.

• Must use names of components.
• A component can appear in more than one category.

categories[key].title

The user-facing title for the category. Will use the category key if not provided.

categories[key].visible

A boolean describing whether or not the category should be visible in the side bar. Defaults to true.

categories[key].defaultExpanded

A boolean describing whether or not the category should be expanded by default in the side bar. Defaults to true.

categories["other"]

The default category for all uncategorized components. Receives all other categories params.