DEV Community

Alex Spinov
Alex Spinov

Posted on

Payload CMS Has a Free API You've Never Heard Of

Payload is an open-source headless CMS and application framework built with TypeScript. Unlike most CMSs, Payload generates a fully typed REST and GraphQL API from your config — and it's 100% free to self-host.

What Makes Payload Special?

  • Code-first — config is TypeScript, not a GUI
  • Free forever — open source, self-hosted
  • Auto-generated APIs — REST + GraphQL from your schema
  • Admin panel — beautiful auto-generated UI
  • Access control — field-level permissions

The Hidden API: Type-Safe Collections

import { CollectionConfig } from 'payload/types';

export const Products: CollectionConfig = {
  slug: 'products',
  auth: false,
  access: {
    read: () => true,
    create: ({ req: { user } }) => user?.role === 'admin',
    update: ({ req: { user } }) => user?.role === 'admin',
  },
  fields: [
    { name: 'title', type: 'text', required: true },
    { name: 'price', type: 'number', required: true, min: 0 },
    { name: 'description', type: 'richText' },
    { name: 'image', type: 'upload', relationTo: 'media' },
    {
      name: 'category',
      type: 'relationship',
      relationTo: 'categories',
      hasMany: false
    },
    {
      name: 'variants',
      type: 'array',
      fields: [
        { name: 'size', type: 'select', options: ['S', 'M', 'L', 'XL'] },
        { name: 'color', type: 'text' },
        { name: 'stock', type: 'number', min: 0 }
      ]
    }
  ],
  hooks: {
    beforeChange: [({ data }) => {
      data.slug = data.title.toLowerCase().replace(/\s+/g, '-');
      return data;
    }]
  }
};
Enter fullscreen mode Exit fullscreen mode

This auto-generates:

  • GET /api/products — list with filtering, sorting, pagination
  • GET /api/products/:id — single product
  • POST /api/products — create
  • PATCH /api/products/:id — update
  • DELETE /api/products/:id — delete
  • Full GraphQL schema with same operations

Local API — Server-Side Access

// Direct database access — no HTTP overhead
const products = await payload.find({
  collection: 'products',
  where: {
    price: { greater_than: 10 },
    category: { equals: 'electronics' }
  },
  sort: '-createdAt',
  limit: 20
});
Enter fullscreen mode Exit fullscreen mode

Quick Start

npx create-payload-app@latest
cd my-app && npm run dev
# Admin panel at localhost:3000/admin
# API at localhost:3000/api
Enter fullscreen mode Exit fullscreen mode

Why Developers Choose Payload

A developer shared: "We evaluated Strapi, Directus, and Payload. Payload won because the config is TypeScript — we get autocomplete, type checking, and refactoring support. It feels like writing application code, not configuring a CMS."


Building content platforms? Email spinov001@gmail.com or check my toolkit.

What CMS do you use? Payload vs Strapi vs Directus?

Top comments (0)