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

Param	Example	Type	Status
`components`	`components: { HeadingBlock: {{ render: () => <h1 /> } }`	Object	Required
`root`	`root: { render: () => <div /> }`	`ComponentConfig`	-
`categories`	`categories: { typography: { components: ["HeadingBlock"] } }`	Object	-

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 default content.


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.

Configuration

ComponentConfig