Payload CMS | Node & React Headless CMS

Keep full control over your Express app.
Nothing is imposed on the structure of your app. Just initialize Payload and pass it your Express app. Maintain your own functionality outside of Payload.
Read more
const payload = require('payload');
const express = require('express');

const app = express();

// Do whatever you want with your app.
// Just pass it to Payload and everything
// will be scoped to Payload routers.

payload.init({
secret: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
mongoURL: 'mongodb://localhost/payload',
express: app,
});

app.listen(process.env.PORT, () => {
console.log(`Application listening on ${3000}...`);
});
Extremely powerful function-based access control.
Secure your data by writing access control functions based on either a document or field level. Build out your own RBAC or any access control pattern you need.
Read more
const Orders = {
// ...
access: {
create: () => true, // Everyone can create
read: ({ req: { user } }) => {
if (user) {
return { // Users can only read their own
owner: { equals: user.id, },
};
}

return false; // Not logged in? Can't read any
},
update: ({ req: { user } }) => {
// Only Admins can update Orders
if (user.roles.includes('admin')) return true;
return false;
},
delete: () => false, // No one can delete
},
};
Hooks for every action Payload provides.
Both document and field-level hooks expose a ton of potential. Customize output, sanitize incoming data, or easily integrate with third-party platforms. The pattern is extremely powerful.
Read more
const Customers = {
// ...
hooks: {
beforeChange: [
// Before the Customer is created or updated,
// sync it to Hubspot
syncCustomerToHubspot,
],
afterChange: [
// Send the new Customer a welcome email
// after it's successfully created
sendWelcomeEmail,
],
afterRead: [
// Dynamically append user's active subscriptions
// straight from Stripe
addStripeSubscriptions,
],
},
};
Show and hide fields with conditional logic.
Inspired by ACF, all admin fields can be toggled on or off based on a function that you define. Base your condition on what other fields are doing or whatever you want. It's just a function.
Read more
{
// ...
fields: [
{
name: 'enableGreeting',
type: 'checkbox',
},
{
name: 'greeting',
type: 'text',
admin: {
condition: (data) => {
if (data.enableGreeting) {
// if `enableGreeting` is checked, show
return true;
} else {
// Otherwise hide it
return false;
}
}
}
}
]
}
Swap in your own components.
Every high-level component in the Admin dashboard is swappable with your own React component. Customize existing views or field types—or even add your own routes—with an extremely intuitive API.
Read more
import { useFieldType } from 'payload/components/forms';

// Customize anything within the Payload Admin panel
// by providing your own React component(s)

const CustomTextField = ({ path }) => {
// All you need to handle is sending and
// receiving the form's value
const { value, setValue } = useFieldType({ path });

return (
<input
onChange={(e) => setValue(e.target.value)}
value={value}
/>
)
}

Get started in just one line.

npx create-payload-app

Read the docs Talk to us

Payload's significance lies in its simplicity. From auth to upload, Payload gives you what you need to build your apps and then stays out of your way.

Keep full control over your Express app.

Extremely powerful function-based access control.

Hooks for every action Payload provides.

Show and hide fields with conditional logic.

Swap in your own components.