Plugin

A plugin is an extension that enhances the capabilities of Puck.

import { Puck } from "@measured/puck";
 
const MyPlugin = {
  name: "my-plugin", // Globally unique name
  label: "My plugin", // Plugin rail label
  icon: <svg />, // Icon for plugin rail
  render: () => <div>My plugin</div>, // UI for plugin panel
};
 
export function Editor() {
  return (
    <Puck
      // ...
      plugins={[MyPlugin]}
    />
  );
}

Params

Optional params

icon

React node displayed alongside label in the plugin rail.

const MyPlugin = {
  icon: <MyIcon />,
};

Puck uses Lucide icons. You can use lucide-react to choose a similar icon, if desired.

label

Human-readable label shown in the plugin rail. Falls back to name.

const MyPlugin = {
  label: "My plugin", // Human-readable label
};

fieldTransforms

Transform the value of a field before rendering in the editor.Implements the Field Transforms API.

const MyPlugin = {
  fieldTransforms: {
    // Make all props powered by "text" field pink in the editor
    text: ({ value }) => <span style={{ color: "hotpink" }}>{value}</span>,
  },
};

mobilePanelHeight

Controls how the plugin panel behaves on mobile screens.

• "toggle" (default): show a smaller plugin panel with a maximize button to expand it.
• "min-content": size the panel to the height of its content.

name

A globally unique name for the plugin. When render is provided, name is required and for the plugin to appear within the plugin rail. The current open plugin is tracked in ui.plugin.current

const MyPlugin = {
  name: "my-plugin", // Globally unique identifier
};

overrides

Override the render functions for specific portions of the Puck UI. Implements the overrides API.

const MyPlugin = {
  overrides: {
    // Make all drawer items pink
    drawerItem: ({ name }) => <div style={{ color: "hotpink" }}>{name}</div>,
  },
};

render

Render function for the plugin pane, shown when the plugin is selected in the plugin rail.

const MyPlugin = {
  render: () => <div>My plugin</div>,
};