DOCSEARCHbyAlgolia
Submit Docs

Payload CMS

repository·main·Indexed 13 days ago

https://github.com/payloadcms/payload

A Next.js native headless CMS and app framework that allows developers to combine their frontend and backend within a single /app folder. It is open-source, highly extensible, and designed for modern serverless deployment environments, featuring a Local API, HTTP API (REST and GraphQL), and a customizable Admin Panel.

Tokens
635.6K
Snippets
1.8K
Records
2.3K
Agent score
97%

What's inside Payload

  1. What is Payload?

    main

    Payload is a Next.js fullstack framework that can be used as a Content Management System (CMS), enterprise tool framework, headless commerce platform, or digital asset management (DAM) tool.

    By writing a Payload Config, you automatically generate:

    • A full Admin Panel (React-based UI)
    • A database with migrations
    • REST and GraphQL APIs
    • Authentication and Access Control
    • File storage and Live Preview

    Payload is an open-source TypeScript codebase that you own and can deploy anywhere.

  3. Overview of the Payload REST API

    main

    Payload automatically generates a fully functional REST API based on your Collection and Global configurations. The API allows for standard CRUD operations and includes built-in support for pagination, depth (relationship population), and sorting.

    All API routes are prefixed by the routes.api value in your configuration (the default is /api).

    To interact with a collection, use its slug. Note that collection slugs must be formatted in kebab-case.

    // Example: Fetching documents from a 'pages' collection
fetch('https://localhost:3000/api/pages')
  .then((res) => res.json())
  .then((data) => console.log(data))

  7. Overview of the Payload Stripe Plugin

    main
    The Payload Stripe Plugin provides a seamless connection between Payload CMS and Stripe. It allows developers to integrate Stripe's capabilities directly into their Payload configuration, facilitating features like subscription management, product synchronization, and payment processing within the Payload ecosystem.

  8. Overview of official Payload Rich Text features

    main

    Payload provides a wide range of officially maintained Rich Text features for its editor. Most text formatting features (like Bold, Italic, and Heading) are included by default. Some advanced features, such as FixedToolbarFeature, BlocksFeature, and TableFeature, must be explicitly enabled or configured.

    All features are customizable; you can modify existing ones or create your own custom features to extend the editor's capabilities.

    | Feature Name | Included by default | Description |
| --------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`BoldFeature`** | Yes | Adds support for bold text formatting. |
| **`ItalicFeature`** | Yes | Adds support for italic text formatting. |
| **`UnderlineFeature`** | Yes | Adds support for underlined text formatting. |
| **`StrikethroughFeature`** | Yes | Adds support for strikethrough text formatting. |
| **`SubscriptFeature`** | Yes | Adds support for subscript text formatting. |
| **`SuperscriptFeature`** | Yes | Adds support for superscript text formatting. |
| **`InlineCodeFeature`** | Yes | Adds support for inline code formatting. |
| **`ParagraphFeature`** | Yes | Provides entries in both the slash menu and toolbar dropdown for explicit paragraph creation or conversion. |
| **`HeadingFeature`** | Yes | Adds Heading Nodes (by default, H1 - H6, but that can be customized) |
| **`AlignFeature`** | Yes | Adds support for text alignment (left, center, right, justify) |
| **`IndentFeature`** | Yes | Adds support for text indentation with toolbar buttons |
| **`UnorderedListFeature`** | Yes | Adds support for unordered lists (ul) |
| **`OrderedListFeature`** | Yes | Adds support for ordered lists (ol) |
| **`ChecklistFeature`** | Yes | Adds support for interactive checklists |
| **`LinkFeature`** | Yes | Allows you to create internal and external links |
| **`RelationshipFeature`** | Yes | Allows you to create block-level (not inline) relationships to other documents |
| **`BlockquoteFeature`** | Yes | Allows you to create block-level quotes |
| **`UploadFeature`** | Yes | Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images |
| **`HorizontalRuleFeature`** | Yes | Adds support for horizontal rules / separators. Basically displays an `<hr>` element |
| **`InlineToolbarFeature`** | Yes | Provides a floating toolbar which appears when you select text. This toolbar only contains actions relevant for selected text |
| **`FixedToolbarFeature`** | No | Provides a persistent toolbar pinned to the top and always visible. Both inline and fixed toolbars can be enabled at the same time. |
| **`BlocksFeature`** | No | Allows you to use Payload's [Blocks Field](../fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field. |
| **`TreeViewFeature`** | No | Provides a debug box under the editor, which allows you to see the current editor state live, the dom, as well as time travel. Very useful for debugging |
| **`TableFeature`** | No | Adds support for tables, with a toolbar button and slash menu entry for creation and editing. |
| **`TextStateFeature`** | No | Allows you to store key-value attributes within TextNodes and assign them inline styles. |

  11. Core Payload Features overview

    main

    Payload is a Next.js native, open-source headless CMS designed to run inside your existing /app folder. Key features include:

    • Next.js Native: Run the CMS and your frontend in the same directory; use React Server Components to query your database directly without REST/GraphQL.
    • TypeScript First: Full TypeScript support with automatic types for your data.
    • Extensible Admin: A customizable React-based admin panel and support for server components to extend the UI.
    • Built-in Auth: Authentication is available out of the box.
    • Content Management: Includes versions, drafts, localization, and a block-based layout builder.
    • Rich Text: Powered by the Lexical rich text editor.
    • Logic & Control: Granular access control, conditional field logic, and document/field-level hooks for all actions.
    • Security: Built with HTTP-only cookies and CSRF protection.

  12. How the Website Template is configured

    main

    The Website Template is pre-configured with specific Collections and Globals to support common website needs:

    Collections

    • Users: Auth-enabled collection for accessing the admin panel and managing unpublished content.
    • Posts: Used for blogs or news. Supports the Layout Builder and Draft/Preview workflows.
    • Pages: Supports the Layout Builder and Draft/Preview workflows.
    • Media: An uploads-enabled collection for images, videos, and assets. Includes pre-configured sizes, focal points, and manual resizing.
    • Categories: A taxonomy collection for grouping posts (supports nesting, e.g., "News > Technology").

    Globals

    • Header: Manages data for the website's navigation/header.
    • Footer: Manages data for the website's footer.