DocsExtending PuckPlugins

Plugin API

⚠️ The plugin API is highly experimental and is likely to experience breaking changes.

The plugin API enables developers to distribute plugins to customize the Puck interface.

Official plugins

  • emotion-cache: Inject emotion cache into the Puck iframe.
  • heading-analyzer: Analyze the heading outline of your page and be warned when you’re not respecting WCAG 2 accessibility standards.

Please see the awesome-puck repo for a full list of community plugins.

Developing a plugin

Plugins implement the same overrides API used to build custom interfaces:

import { Puck } from "@measured/puck";
 
const MyPlugin = {
  overrides: {
    componentItem: ({ name }) => (
      <div style={{ backgroundColor: "hotpink" }}>{name}</div>
    ),
  },
};
 
export function Editor() {
  return (
    <Puck
      // ...
      plugins={[MyPlugin]}
    />
  );
}

Plugin currying

Plugins are rendered in the order they are defined. Unless otherwise specified, all overrides are curried, meaning that the return node of one plugin will be passed as children to the next plugin.

This may result in some incompatible plugin combinations. To improve your chance of building a widely compatible plugin, consider:

  1. Implementing as few override methods as you need
  2. Always rendering children if possible

Custom fields

Plugins enable full UI overhauls. If you’re creating a field for a specific use-case, you might be better off distributing a custom field.

Further reading

ThemingComponents