Developing a plugin

The plugin API follows a React paradigm. Each plugin passed to the Puck editor can provide three functions:

• renderRoot (Component): Render the root node of the preview content
• renderRootFields (Component): Render the root fields
• renderFields (Component): Render the fields for the currently selected component

Each render function receives the children prop, which you must render, and the data prop, which can be used to read the data model.

Example

Here's a basic plugin that renders a "My plugin" heading in the root field area:

const myPlugin = {
  renderRootFields: (props) => (
    <div>
      {props.children}
 
      <h2>My plugin</h2>
    </div>
  ),
};