Payload CMS
Modern TypeScript headless CMS with great developer experience.
Overview
Payload CMS is a modern headless content management system built specifically for TypeScript developers, offering full type safety and an exceptional developer experience. Unlike traditional CMSs that force you into rigid templates, Payload generates TypeScript types from your content schemas and provides both REST and GraphQL APIs automatically. It combines the flexibility of a headless architecture with powerful admin UI generation, making it ideal for developers who want complete control over their frontend while maintaining content editor-friendly backend interfaces.
This stack pairs Payload with MongoDB to create a powerful content platform that leverages MongoDB's flexible document structure for complex content relationships and schema evolution. MongoDB's JSON-like document storage aligns perfectly with Payload's TypeScript-first approach, allowing for rich content modeling without the constraints of relational database tables. The combination enables rapid content schema changes, complex nested structures, and efficient querying for content delivery APIs.
This configuration is perfect for development teams building modern web applications, e-commerce platforms, or multi-tenant SaaS products where content flexibility and type safety are paramount. Frontend developers working with React, Next.js, or Vue will particularly benefit from Payload's automatic TypeScript type generation, while content creators get a polished admin interface that adapts to custom field configurations.
Key Features
- Automatic TypeScript type generation from content collections with full IntelliSense support
- Built-in authentication and authorization with role-based access control and field-level permissions
- Rich text editor with custom React components and serializable JSON output
- Advanced relationship fields supporting one-to-one, one-to-many, and many-to-many associations
- Configurable file upload handling with support for local storage, S3, and Cloudinary adapters
- Live preview functionality for draft content with webhook integration
- MongoDB aggregation pipeline support for complex content queries and analytics
- Custom React components in admin UI with hooks for extending functionality
Common Use Cases
- 1Multi-site content management for agencies serving multiple clients from single installation
- 2E-commerce platforms requiring complex product relationships and inventory management
- 3Documentation websites with versioning, team collaboration, and API-driven content delivery
- 4SaaS applications needing user-generated content with role-based publishing workflows
- 5Mobile app backends requiring structured content delivery with offline sync capabilities
- 6Corporate websites with multilingual content and approval workflows for compliance
- 7Developer portfolios and blogs with custom post types and automated deployment triggers
Prerequisites
- Docker and Docker Compose installed with at least 4GB available RAM for development workloads
- Node.js 18+ and npm/yarn knowledge for Payload project initialization and customization
- TypeScript familiarity for schema configuration and custom field development
- Basic MongoDB concepts including document structure and indexing strategies
- Understanding of environment variable management for secrets and database connections
- Port 3000 available for Payload admin interface and API endpoints
For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms
docker-compose.yml
docker-compose.yml
1services: 2 payload: 3 build: .4 container_name: payload5 restart: unless-stopped6 environment: 7 MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}8 PAYLOAD_SECRET: ${PAYLOAD_SECRET}9 ports: 10 - "3000:3000"11 depends_on: 12 - mongodb13 networks: 14 - payload-network1516 mongodb: 17 image: mongo:718 container_name: payload-mongodb19 volumes: 20 - mongodb_data:/data/db21 networks: 22 - payload-network2324volumes: 25 mongodb_data: 2627networks: 28 payload-network: 29 driver: bridge.env Template
.env
1DB_NAME=payload2PAYLOAD_SECRET=your-secret-hereUsage Notes
- 1Docs: https://payloadcms.com/docs
- 2Create project: npx create-payload-app, then add Dockerfile
- 3Access admin at http://localhost:3000/admin - create first user
- 4REST API at /api/[collection], GraphQL available
- 5TypeScript-first: full type safety and autocompletion
- 6Local file uploads, S3, Cloudinary adapters available
Individual Services(2 services)
Copy individual services to mix and match with your existing compose files.
payload
payload:
build: .
container_name: payload
restart: unless-stopped
environment:
MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
PAYLOAD_SECRET: ${PAYLOAD_SECRET}
ports:
- "3000:3000"
depends_on:
- mongodb
networks:
- payload-network
mongodb
mongodb:
image: mongo:7
container_name: payload-mongodb
volumes:
- mongodb_data:/data/db
networks:
- payload-network
Quick Start
terminal
1# 1. Create the compose file2cat > docker-compose.yml << 'EOF'3services:4 payload:5 build: .6 container_name: payload7 restart: unless-stopped8 environment:9 MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}10 PAYLOAD_SECRET: ${PAYLOAD_SECRET}11 ports:12 - "3000:3000"13 depends_on:14 - mongodb15 networks:16 - payload-network1718 mongodb:19 image: mongo:720 container_name: payload-mongodb21 volumes:22 - mongodb_data:/data/db23 networks:24 - payload-network2526volumes:27 mongodb_data:2829networks:30 payload-network:31 driver: bridge32EOF3334# 2. Create the .env file35cat > .env << 'EOF'36DB_NAME=payload37PAYLOAD_SECRET=your-secret-here38EOF3940# 3. Start the services41docker compose up -d4243# 4. View logs44docker compose logs -fOne-Liner
Run this command to download and set up the recipe in one step:
terminal
1curl -fsSL https://docker.recipes/api/recipes/payload-cms/run | bashTroubleshooting
- Module build failed with TypeScript errors: Ensure tsconfig.json includes Payload's generated types directory and restart the container
- MongoDB connection refused: Verify MONGODB_URI environment variable uses service name 'mongodb' not 'localhost' for container networking
- Admin UI shows 'Unauthorized' after login: Check PAYLOAD_SECRET environment variable is set and consistent across container restarts
- File uploads failing with permission errors: Verify Docker volume permissions and ensure upload directory is writable by container user
- API responses missing TypeScript types: Run 'payload generate:types' command and rebuild container to update generated definitions
- Collection queries returning empty results: Check MongoDB indexes are created properly and collection names match Payload schema slugs exactly
Community Notes
Loading...
Loading notes...
Download Recipe Kit
Get all files in a ready-to-deploy package
Includes docker-compose.yml, .env template, README, and license
Ad Space
Shortcuts: C CopyF FavoriteD Download