Payload

Awesome Payload

A curated list of awesome Payload resources for users and developers.

Payload is a free and open-source full-stack Next.js framework and headless CMS aimed sharply at providing the best, developer-first experience possible to build out APIs and admin UI.
Payload is natively integrated with Next.js and is installed directly into your Next.js app.

Official

Official resources.

• GitHub - Official GitHub repository of the Payload framework.
• Blog - Official blog. Announcements.
• Payload Guides & Tutorials - High-quality guides and articles.
• YouTube - Official YouTube channel with learning materials.
• Discord - Official Discord. Community chat and support.
• X (Twitter) - Official X account. Payload news and announcements.
• Reddit - Discuss and share anything Payload related on Reddit.

Education

Learning resources in various formats.

YouTube channels

• Aaron Saunders - Payload videos related to integrations and custom components.
• All About Payload - Tutorials, tips and tricks.
• Danail Minchev - Practical Payload tutorials.
• Learn Payload with Colyn - Payload series.
• NLV Codes - Channel dedicated to Payload, starting with beginner lessons.
• Sam Thoyre - Full courses related to Payload.
• Studio Monty - Custom components for Payload and useful tips.

Examples

• Official examples - Examples from the official repository.
• Payload website - This is the repository for Payload's official website. It was built completely in public using Payload itself.
• DanailMinchev / payload-clerk-example - Payload and Clerk example.
• Payload and Clerk example - Part 1. Role-based access control and custom components.
• Payload and Clerk advanced integration - Part 2. Advanced integration with Clerk webhooks and custom components tested with Playwright.

Blogs

• Adrian Maj - Practical guides for Payload.

Articles

• The Listener Pattern in Payload - Using React principles to create useful behavior for your Payload admin panel.
• Payload: 2FA Implementation - Two-factor authentication (2FA) for Payload.
• Creating a Color Picker - How to create a custom color picker for Payload's rich-text editor (Lexical).

Templates

Begin your next project by starting with a pre-made template. These are production-ready, end-to-end solutions.

• Official templates - Templates from the official repository.
• ShopNex - An open-source Shopify alternative built with Payload.

Plugins

List of interesting community plugins.

• r1tsuu / payload-enchants - A collection of enhancement packages for Payload.
• authsmith / payload-auth-plugin - This plugin extends the Payload authentication process and implements OAuth- and Passkey-based authentication features.
• payload-auth / payload-auth - A monorepo for integrating Payload with various authentication providers.
• CrawlerCode / payload-authjs - A Payload plugin for Auth.js.
• ashbuilds / payload-ai - The Payload AI Plugin is a powerful extension, integrating advanced AI capabilities to enhance content creation and management.
• elliott-w / imageAspectRatios.ts - Payload image aspect ratios plugin.
• AdrianMaj / payload-lexical-typography - Payload plugin for extending lexical typography options (Text color, Font size, Letter spacing, Line height, Font Family etc.)
• rilrom / payload-bites - Collection of various bite-sized Payload v3 plugins including image-search, fullscreen-editor, audit-fields, soft-delete and activity-log.
• shefing / payload-tools - Contains a set of powerful plugins designed to enhance your Payload projects (Authorization, Authors Info, Rich-text Comments, Right Panel, Custom Version View, Cross-Collection Config, Field-type Component Override, Color Picker Field, Icon Select, Quick Filter, Reset List View, etc).
• Crayonan / payload-plugin-ai-localization - Adds an AI-powered "Translate" button to non-primary localized fields in Payload. Automatically translates content from the primary language using OpenAI or other models.

Miscellaneous

Other resources.

• withPayload - Discover starter kits, plugins, and other useful resources.

Contributing

Contributions welcome! Read the contribution guidelines first.