Payload
Alternative to Directus

Payload is code-first, while Directus is GUI-based. Directus describes itself as an open data platform, similar to how database clients like PHPMyAdmin work, while Payload is a purpose-built developer-first headless CMS that features CMS-specific features like future versions, block-based layout editor, preview, and more.

Code-based Configuration

Payload is fully code-based and can be version controlled easily. No clicking around a GUI to start every project.

Directus abstracts away significantly more from you as a developer than Payload does. With Directus, you are forced to do things the Directus way which comes with significant learning, vendor lock-in, and functionality limitations. However, Payload takes great effort to deliver the best developer experience possible. Everything Payload does is done in clean and understandable config-based code.

01
Code-First

With Payload, you design your schema in code and check the files into your version control. However, Directus stores your config in a database—meaning deploying schema changes in Directus means that you need to export and import a database.

02
TypeScript Support

Payload has first-class support for TypeScript, including type generation from your data models. You can be certain that you'll be productive in your IDE without having to go through mountains of documentation.

03
Use Your Express Server

Payload uses your Express server, and you can use your own middleware or build your own endpoints with ease. However, Directus has its own black-boxed server, which means extending it needs to be done the Directus way.

Simple Concepts

Payload's magic is kept to a minimum so you can understand everything about your CMS.

Payload gives you everything you need, but then steps back and lets you build what you want in JavaScript or TypeScript - with no unnecessary complexity brought by GUIs. However, Directus abstracts away a lot of its inner-workings into a black box and makes it much more difficult for a developer to understand what is happening—and why.

Learn about Payload concepts
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,
],
},
};
Open-ended access control

Build any type of access control pattern you can dream of with Payload.

Directus only supports role-based access control (RBAC) which limits you to only being able to control who can perform which actions to your data. However, Payload supports function-based access control which can be used on either a document or field-by-field basis to build any type of control that you can think of.

Learn about Payload's access control
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
},
};
Payload rich text editor showing experience.
Extensible Rich Text

Payload has a true JSON-based Rich Text Editor

Directus uses TinyMCE, which stores content as a string of HTML. Payload stores its rich text as JSON, which is extremely powerful and allows you to build custom elements directly into the Payload rich text editor with ease. Embed YouTube videos, add custom text treatments and effects, reference other documents, and embed media dynamically.

Read about Payload's Rich Text Editor
More Features

Payload supports many features that Directus lacks.

01
React UI

Payload's Admin UI is built with React, and you can easily swap out components with your own React components. Directus is built with Vue, which is significantly less popular and well-known.

02
Local Node API

Payload features a local Node API, which allows you to perform operations directly on your server, with no HTTP layer required. Directus's SDK relies on Axios to interact, which is significantly slower and less powerful.

03
Field-Level Localization

Payload features deep field-based localization support. Maintaining as many locales as you need is easy. Only need to localize a few fields? No problem, all other fields will use your fallback locale.

04
Conditional Logic

Payload has an easy way to show and hide fields based on the value of other fields. For example, you might have an “Enable Link” checkbox, that, when checked, a few more fields should be rendered. Directus does not support this feature.

05
More Powerful Hooks

Both document and field-level hooks expose a ton of potential. Customize output, sanitize incoming data, or easily integrate with third-party platforms. A truly-powerful pattern.

06
Mongo vs. SQL-based

Payload uses MongoDB which allows for lightning-fast performance and a flexible document structure which is perfect for CMS-type applications. However, Directus is SQL-based which requires overhead like migrations and more.

Get started with one line.

npx create-payload-app