Payload comes with a built-in Plugins infrastructure that allows developers to build their own modular and easily reusable sets of functionality.
Because we rely on a simple config-based structure, Payload plugins simply take in a user's existing config and return a modified config with new fields, hooks, collections, admin views, or anything else you can think of.
Writing plugins is no more complex than writing regular JavaScript. If you know how spread syntax works and are up to speed with Payload concepts, writing a plugin will be a breeze.
Example use cases:
- Automatically sync data from a specific collection to HubSpot or a similar CRM when data is added or changes
- Add password-protection functionality to certain documents
- Add a full ecommerce backend to any Payload app
- Add custom reporting views to Payload's admin panel
- Encrypt specific collections' data
- Add a full form builder implementation
- Integrate all
upload
-enabled collections with a third-party file host like S3 or Cloudinary
- Add custom routes or GraphQL queries / mutations with any type of custom functionality that you can think of
#
How to install plugins
The base Payload config allows for a plugins
property which takes an array
of Plugins
.
import { buildConfig } from 'payload/config';
import addLastModified from 'payload-add-last-modified';
import passwordProtect from 'payload-password-protect';
const config = buildConfig({
collections: [
{
slug: 'pages',
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'content',
type: 'richText',
required: true,
}
]
}
],
plugins: [
passwordProtect(['pages']),
addLastModified,
]
});
export default config;
When Plugins are initialized
Payload Plugins are executed after the incoming config is validated, but before it is sanitized and had default options merged in.
After all plugins are executed, the full config with all plugins will be sanitized.
#
Simple example
Here is an example for how to automatically add a lastModifiedBy
field to all Payload collections using a Plugin written in TypeScript.
import { Config, Plugin } from 'payload/config';
const addLastModified: Plugin = (incomingConfig: Config): Config => {
const authEnabledCollections = incomingConfig.collections.filter(
collection => Boolean(collection.auth)
);
const config: Config = {
...incomingConfig,
collections: incomingConfig.collections.map((collection) => {
return {
...collection,
fields: [
...collection.fields,
{
name: 'lastModifiedBy',
type: 'relationship',
relationTo: authEnabledCollections.map(({ slug }) => slug),
hooks: {
beforeChange: [
({ req }) => ({
value: req?.user?.id,
relationTo: req?.user?.collection,
}),
]
},
admin: {
position: 'sidebar',
readOnly: true,
},
},
],
};
}),
};
return config;
};
export default addLastModified;
#
Available Plugins
You can discover existing plugins by browsing the payload-plugin
topic on GitHub.
For maintainers building plugins for others to use, please add the topic to help others find it. If you would like one to be built by the core Payload team, open a Feature Request in our GitHub Discussions board. We would be happy to review your code and maybe feature you and your plugin where appropriate.