Directus describes itself as an "open data platform," similar to clients like PHPMyAdmin. Payload, meanwhile, is developer-first, allowing unmatched extensibility, with modern CMS-specific features.

Schedule a Demo

Building with Payload can be done quickly and effectively, thanks to its code-based customization and developer-friendly features.

Sowmya Reddy Peta, Engineer

Screenshots of Microsoft's AI Tips and Tricks website.

BY THE NUMBERS

Payload is 3x faster than Directus

The code for this test is available and open source. You can also read the full study.

Not just compatible with Next.js—built for it.

Being native to Next.js means that Payload delivers seamless integration and unmatched performance for modern web development.

Schedule a Demo

Harmonious Deployment

Bring your front and back-end together in perfect harmony, simplifying deployment and enhancing collaboration across your entire stack.

Fully Leverage React Server Components

Extend your admin panel with server components, reducing client-side load and keeping business logic behind the scenes.

Turbopack Out of Box

Payload supports Turbopack from the start, accelerating development with instant updates and a brilliant developer experience.

Deploy Serverlessly

A Next.js foundation allows effortless deploy of your full stack to serverless platforms like Vercel, streamlining your workflow and boosting scalability.

Enterprise

True visual editing

Payload enables users to click, point, and edit as they navigate—bypassing the need to interact with the CMS. By contrast, Directus features live preview (also available in Payload), but stops short of visual editing.

Use Payload Visual Editing to update rich text, relationships, media, and more

React vs Vue

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.js, a significantly less popular alternative.

Explore Docs

1import React from 'react'
2import { useTranslation } from 'react-i18next'
3
4import { getTranslation } from 'payload/utilities/getTranslation'
5
6type Props = {
7  htmlFor?: string
8  label?: Record<string, string> | false | string
9  required?: boolean
10}
11
12const CustomLabel: React.FC<Props> = (props) => {
13  const { htmlFor, label, required = false } = props
14
15  const { i18n } = useTranslation()
16
17  if (label) {
18    return (<span>
19      {getTranslation(label, i18n)}
20      {required && <span className="required">*</span>}
21    </span>);
22  }
23
24  return null
25}
26                          

Serverless support

Payload's deep integration with the Next.js and native support for serverless architectures, like Vercel, makes it the de facto CMS for Next.js projects.

Learn about Payload on Next

Local API

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

Explore Docs

1// The created Post document is returned
2const post = await payload.create({
collection: 'posts', // required
data: {
  // required
  title: 'sure',
  description: 'maybe',
},
locale: 'en',
fallbackLocale: false,
user: dummyUserDoc,
overrideAccess: true,
showHiddenFields: false,
14
// If creating verification-enabled auth doc,
// you can optionally disable the email that is auto-sent
disableVerificationEmail: true,
18
// If your collection supports uploads, you can upload
// a file directly through the Local API by providing
// its full, absolute file path.
filePath: path.resolve(__dirname, './path-to-image.jpg'),
23
// Alternatively, you can directly pass a File,
// if file is provided, filePath will be omitted
file: uploadedFile,
27})
                        

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.

Explore Docs

1import { buildConfig } from 'payload/config'
2
3export default buildConfig({
collections: [
  // collections go here
],
localization: {
  locales: [
    {
      label: 'English',
      code: 'en',
    },
    {
      label: 'Arabic',
      code: 'ar',
      // opt-in to setting default text-alignment on Input fields to rtl (right-to-left) when current locale is rtl
      rtl: true,
    },
  ],
  defaultLocale: 'en',
  fallback: true,
},
23})
                        

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.

Explore Docs

1import type { FieldHook } from 'payload/types'
2
3// Field hook type is a generic that takes three arguments:
4// 1: The document type
5// 2: The value type
6// 3: The sibling data type
7
8type ExampleFieldHook = FieldHook<ExampleDocumentType, string, SiblingDataType>
9
10const exampleFieldHook: ExampleFieldHook = (args) => {
11  const {
12    value, // Typed as `string` as shown above
13    data, // Typed as a Partial of your ExampleDocumentType
14    siblingData, // Typed as a Partial of SiblingDataType
15    originalDoc, // Typed as ExampleDocumentType
16    operation,
17    req,
18  } = args
19
20  // Do something here...
21
22  return value // should return a string as typed above, undefined, or null
23}
24                          

Database flexibility

Payload gives you the choice of MongoDB or Postgres, both allow for a flexible document structure which is perfect for a CMS. Directus provides only one SQL-based database option, which requires overhead like migrations and more.

Explore Docs

1import { postgresAdapter } from '@payloadcms/db-postgres'
2
3export default buildConfig({
// Your config goes here
collections: [
  // Collections go here
],
// Here is where you pass your database adapter
// and the adapter will require options specific to itself
db: postgresAdapter({
  pool: {
    connectionString: process.env.DATABASE_URI,
  }
}),
15})
                        

With Payload, you can power anything. Or everything.

01

Headless CMS

Create with a minimal, powerful editing experience. Extend effortlessly.

02

Enterprise App Builder

Build modern, sophisticated tools—while saving development costs.

03

Headless Ecommerce

Manage all your content, alongside your products, in a single, powerful editing experience.

04

Digital Asset Management

Ensure brand consistency by seamlessly managing digital assets within your CMS.

Connect with us.

Whether you need help from our active community or have questions about using Payload at the enterprise level, we’re here to help.

Schedule a Demo

Payload on Discord

npx create-payload-app