Payload
News
Discord server is live

The most powerful TypeScript headless CMS there is.

npx create-payload-app

Try the demo
Use Cases

Payload is the last CMS you’ll ever need. It’s 100% TypeScript and is by far the most extensible and developer-first headless CMS on the market.

Payload has, hands-down, the best developer experience out of any headless CMS. Build whatever you need, however you want, and never hit a functionality roadblock. Payload is the go-to headless CMS for websites, SaaS apps, native apps, and anything else you need to build.

01
Websites

Power any website, from enterprise to personal portfolio with Payload as a headless CMS. Its powerful version system and layout building functionality unlocks the best CMS experience for your editors on the market.

02
Web Apps

Payload powers extremely complex and fully featured web apps of every shape and size. It's the perfect back-office CMS for ecommerce sites, SaaS, video game backends, and more.

03
Native Apps

Implement Payload’s Authentication and content management within any native app you can dream up and automatically deliver product owners a beautiful UI to manage their apps with.

  • Self-hosted

    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}...`);
    });
  • Access Control

    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
    },
    };
  • Extend via Hooks

    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,
    ],
    },
    };
  • Dynamic UI

    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 field
    return true;
    } else {
    return false;
    }
    }
    }
    }
    ]
    }
Features

Get everything you need to power complex apps.

Unlike other headless CMS, Payload catapults your development process no matter what you’re trying to build. Thanks to its reusable, highly secure authentication as well as its hooks-based infrastructure, your development efficiency will be dramatically accelerated.

01
React Admin Panel

Allow your content editors to manage data with Payload’s Admin panel. Swap in your own components wherever you need with ease

02
Instant APIs

Payload takes your config and instantly delivers full REST, GraphQL, and server-side Node APIs which are all easily and beautifully extensible.

03
Localization

Payload features robust localization support. Manage your content in an unlimited amount of locales, on a field-by-field basis.

04
File Upload

Everything you need to enable file upload, storage, and management directly on your server—including extremely powerful file access control.

05
Authentication

Make use of highly secure and customizable user auth out of the box, including function-based access control.

06
Hooks

A powerful pattern to add your own logic like integrating with third-party APIs, adding auto-generated data, and more.

07
Powerful Fields

Payload has the most powerful field types out of any available headless CMS—including layout builders and an extensible rich text editor.

08
TypeScript

Build your project in TypeScript and auto-generate TypeScript interfaces for each of your data models. Payload and TypeScript fit together perfectly.

Admin panel showing multiple field types that can be selected when authoring content.
Powerful field types

Make use of 18 field types—and counting.

Payload’s field types are far and away more robust than any other headless CMS out there. Dynamic fields like Arrays and Blocks unlock incredible potential while purpose-built fields like Relationship and GeoJSON allow for incredibly flexible data modeling.

See all field types
Admin panel showing multiple field types that can be selected when authoring content.
Custom Components

Swap in your own React components.

Want to add a view to the Admin UI? Simple. How about building a custom field type? Or maybe swap in your client’s branding? Every high-level component in the Admin dashboard is easily swappable with your own React component. Customize existing views or field types—or even add your own routes—with an extremely intuitive API.

Learn about custom components
Get started with one line.

npx create-payload-app