Payload CMS

Veröffentlicht am von

1. Was ist Payload

Mit der zunehmenden Entkopplung von Inhaltsverwaltung und Inhaltspräsentation haben sich Headless-CMS-Systeme als Standard für moderne Webarchitekturen etabliert. Payload CMS ist ein Node.js-basiertes Headless CMS, das einen konsequenten Code-First-Ansatz verfolgt. Im Gegensatz zu vielen Mitbewerbern, die auf eine grafische Konfiguration setzen, wird Payload vollständig über TypeScript-Definitionen gesteuert. Gegründet wurde Payload CMS im Jahr 2018 von Elliot DeNolf, James Mikrut und Dan Ribbens. Payload CMS 1.0 wurde im Sommer 2022 veröffentlicht. Im Juni 2025 wurde Payload CMS von Figma gekauft. Dieser Bericht erläutert die technischen Kernaspekte und Features des Systems.

2. Der Code-First-Ansatz

Payload CMS verfolgt das Prinzip „Code-First“. Das bedeutet, dass die gesamte Struktur des CMS – von den Datenmodellen bis hin zu den Zugriffsberechtigungen – direkt im Quellcode definiert wird.

Beispielsweise werden Collections in Form eines JavaScript-Objektes definiert, wobei die einzelnen Feldtypen, Labels und weitere optionale Parameter wie Access-Beschränkungen und Default-Werte definiert

2.1 Schemas und Versionierung

Da die Schemas in TypeScript- oder JavaScript-Dateien definiert sind, können sie direkt im Git-Repository des Projekts versioniert werden. Dies bietet den Vorteil, dass Änderungen an der Datenstruktur synchron mit dem restlichen Anwendungscode entwickelt, getestet und ausgerollt werden können. Ein manuelles Nachpflegen von Feldern in einer Weboberfläche nach einem Deployment entfällt.

2.2 Validierungen und Hooks

Innerhalb der Schemas lassen sich komplexe Validierungslogiken hinterlegen. Neben einfachen Pflichtfeldern können mittels Funktionen (Custom Validations) beliebige Prüfungen durchgeführt werden.

Zusätzlich bietet Payload ein mächtiges Hook-System. Diese „Hooks“ ermöglichen es, in den Lebenszyklus von Datenoperationen einzugreifen:

  • Collection Hooks: beforeChange, afterChange, beforeDelete, etc.
  • Field Hooks: Diese beziehen sich auf einzelne Felder und erlauben beispielsweise die Transformation von Daten beim Lesen oder Schreiben.

3. Datenmodellierung: Collections und Globals

In Payload werden Inhalte in zwei Hauptkategorien unterteilt: Collections und Globals.

  • Collections: Diese dienen der Verwaltung von Listen gleichartiger Datenobjekte, wie zum Beispiel Blog-Artikel, Produkte oder Nutzerprofile. Jedes Dokument in einer Collection erhält eine eindeutige ID.
  • Globals: Diese sind für singuläre Daten gedacht, die nur einmal im System existieren. Typische Beispiele sind Konfigurationen für den Header einer Website, SEO-Metadaten oder allgemeine Einstellungen.

 

 

4. Fields und Field Types

Die Struktur von Collections und Globals wird durch Fields definiert. Payload bietet eine breite Palette an Feldtypen, die in verschiedene Kategorien unterteilt werden können:

  • Einfache Felder (Simple Fields): Text, Number, Email, Date, Checkbox.
  • Auswahlfelder: Select (Dropdown), Radio Group.
  • Beziehungsfelder: Relationship (Verknüpfung zu anderen Collections), Upload (für Medien wie Bilder oder PDFs).
  • Layout- und Strukturfelder: * Group: Fasst Felder logisch zusammen.
    • Array: Erlaubt wiederholbare Datensätze innerhalb eines Dokuments.
    • Blocks: Ermöglicht das Erstellen flexibler Layouts, bei denen Redakteure aus vordefinierten Inhaltsblöcken (z. B. Text-Bild-Block, Hero-Sektion, Zitat) wählen können.
    • Tabs: Dient der optischen Strukturierung im Admin-Panel.

5. Datenbankagnostik

Ein zentrales technisches Merkmal von Payload ist die Datenbankagnostik. Das System ist nicht fest an einen Datenbanktyp gebunden, sondern nutzt Adapter, um mit verschiedenen Systemen zu kommunizieren. Aktuell werden primär zwei Ansätze unterstützt:

  1. MongoDB: Über den Mongoose-Adapter (dokumentenorientiert).
  2. Relational (SQL): Über den Drizzle-Adapter werden PostgreSQL und SQLite unterstützt. Diese Flexibilität erlaubt es Entwicklern, die Datenbank passend zu den Projektanforderungen oder der vorhandenen Infrastruktur zu wählen

6. Schnittstellen: Local API, REST und GraphQL

Payload stellt die Inhalte über drei verschiedene Wege bereit, je nachdem, von wo aus auf die Daten zugegriffen werden soll.

6.1 Local API

Die Local API ist eine Besonderheit von Payload. Sie ermöglicht es, innerhalb desselben Node.js-Prozesses (z. B. in Next.js Server Components) auf die Daten zuzugreifen, ohne einen Umweg über HTTP-Requests zu gehen. Dies ist hochperformant und umgeht Netzwerklatenzen sowie Authentifizierungsaufwand über Header.

6.2 REST und GraphQL

Für externe Anwendungen generiert Payload automatisch standardisierte Endpunkte:

  • REST API: Bietet klassische Endpunkte wie /api/posts, inklusive umfangreicher Query-Parameter zum Filtern und Sortieren.
  • GraphQL API: Payload erstellt automatisch ein vollständiges, typisiertes GraphQL-Schema. Dies ist besonders vorteilhaft für Frontends, die nur spezifische Teildaten abfragen möchten (Overfetching-Vermeidung).

7. Access Control (Zugriffskontrolle)

Sicherheit wird in Payload auf Code-Ebene definiert. Die Zugriffskontrolle ist granular und kann auf Collection-Ebene oder sogar auf Feldebene festgelegt werden. Dabei können Funktionen geschrieben werden, die den Zugriff basierend auf dem eingeloggten Nutzer oder dem Inhalt des Dokuments erlauben oder verweigern. Ein Beispiel wäre, dass „Autoren“ nur ihre eigenen Beiträge bearbeiten dürfen, während „Admins“ vollen Zugriff haben.

8. Erweiterbarkeit (Extensibility)

Payload ist darauf ausgelegt, über den Standardfunktionsumfang hinaus erweitert zu werden:

  • Admin UI: Da das Admin-Panel auf React basiert, können eigene Komponenten (Custom Components) eingebunden werden, um die Redaktionsoberfläche anzupassen.
  • Eigene Endpunkte: Es können zusätzliche Express- oder Next.js-Routen definiert werden, um spezialisierte Logik abzubilden.
  • Plugins: Wiederkehrende Funktionalitäten (z. B. eine Cloudinary-Anbindung oder SEO-Tools) können in Plugins gekapselt und einfach in verschiedene Projekte integriert werden.

9. BPMN-Diagramm

10. Fazit

Payload CMS bietet durch seinen Code-First-Ansatz und die tiefe Integration von TypeScript eine hohe Entwicklungsqualität und Wartbarkeit. Die Kombination aus Datenbankflexibilität, granularem Rechtemanagement und vielfältigen Schnittstellen (insbesondere der Local API) macht es zu einem leistungsfähigen Werkzeug für komplexe, individuelle Webprojekte. Während der Verzicht auf eine reine No-Code-Konfiguration die Einstiegshürde für Nicht-Entwickler erhöht, überwiegen für professionelle Entwicklungsteams die Vorteile der vollen Kontrolle über den Code und die Datenstruktur.

Quellen:

  • Daßler, D., Schmitt, M., Lemhöfer, R. (2025). Präsentationsunterlagen zu Payload CMS.
  • Payload CMS Documentation. https://payloadcms.com/docs (Abgerufen am 20.01.2026).