No black magic and fully open source, Payload is both an app framework and a headless CMS. It's truly the Rails for TypeScript—and you get an admin panel.

Explore the Docs

a code snippet for an example user collection API response.

Define your schema in code and get a full TypeScript backend and admin panel. Instantly.

Skip the hassle of building your own admin panel or using an ORM. With Payload, access a comprehensive, open-source solution that includes built-in authentication, access control, and more, all without the need for additional frameworks or tools.

Read the Docs

Try the Demo

Payload is Next.js native

Payload is built on Next.js, ensuring less hassle, more speed, and enhancing your projects from the ground up.

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 superior 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.

Harmonious Front and Back-End Deployment

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

This elevates the Headless CMS experience to a new level.

Guillermo Rauch, CEO, Vercel

01

Unapologetically code-first

Central to its functionality, the Payload config efficiently scaffolds data storage, custom React components, hook logic, and more, all with the added benefit of TypeScript's strong typing for unmatched productivity.

Read the Docs

Simple example of Payload config

1import { buildConfig } from 'payload/config'
2import { mongooseAdapter } from '@payloadcms/db-mongodb'
3
4import { viteBundler } from '@payloadcms/bundler-vite'
5
6import { lexicalEditor } from '@payloadcms/richtext-lexical'
7
8export default buildConfig({
9  admin: {
10    bundler: webpackBundler(), // Choose your bundler
11  },
12  db: mongooseAdapter({}) // Choose your database
13  editor: lexicalEditor({}) // Choose your rich text editor
14  collections: [
15    // Define your collections
16  ],
17  globals: [
18    // Define your globals
19  ],
20})
21                  

02

Local API

Payload's Local API lets you directly interact with your database on-server, bypassing third-party server latency for instant data access—transforming speed and efficiency in your apps.

Read the Docs

Local API Create

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})
                

03

Simplified Authentication

Payload offers out-of-the-box, customizable user authentication, ensuring secure identity verification both in the Admin panel and across your apps as needed.

Read the Docs

Simple example of Payload Auth

1import { CollectionConfig } from 'payload/types'
2
3export const Admins: CollectionConfig = {
slug: 'admins',
auth: {
  tokenExpiration: 7200, // How many seconds to keep the user logged in
  verify: true, // Require email verification before being allowed to authenticate
  maxLoginAttempts: 5, // Automatically lock a user out after X amount of failed logins
  lockTime: 600 * 1000, // Time period to allow the max login attempts
  // More options are available
},
fields: [
  {
    name: 'role',
    type: 'select',
    required: true,
    options: [
      'user',
      'admin',
      'editor',
      'developer',
    ],
  },
],
25}
                

Features & extensibility designed so you’ll never hit a roadblock.

Read the docs

Payload on GitHub

01

Form builder

Build and manage forms directly within the admin panel.

02

Multi-Tenancy

Share infrastructure by setting up Payload as a multi-tenant application.

03

Reuse Payload authentication

Payload auth works in your own projects too.

04

Localize content

Easily localize content on a field by field basis.

05

Swap in custom components

Extend the admin UI with React.

06

20+ field types

Payload has a field type for anything you need.

07

Manage versions & drafts

Preview drafts and store version history.

08

Handle file uploads

Store uploads locally or in the cloud.

09

Extend with hooks

A powerful pattern to add your own logic.

10

Local API

Execute operations directly on your server.

11

Custom endpoints

Add your own endpoints for custom functionality.

12

Access control

Powerful function-based access control.

No black magic. Just code the way it’s meant to be.

Magic should come not from obscuring the hard parts, but instead, watching the code you write become a project you’re proud of. Payload is built on transparency, offering you full control with the safety net of conventions and best practices.

To say another way, if you ever have to “learn” Payload, we’ve failed. There are no closed doors here, only open paths to explore and innovate.

If we've done our job, Payload will make you a better developer.

Payload on GitHub

Payload provides solutions, not roadblocks.

Forever free and fully open-source under the MIT License.

npx create-payload-app

Create a project

Have a question?

Star us on Github