![\"\"](\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2026\/01\/code-first-941x1024.png\"){kind=spacer}
<\/p>\nMit der zunehmenden Entkopplung von Inhaltsverwaltung und Inhaltspr\u00e4sentation haben sich Headless-CMS-Systeme als Standard f\u00fcr 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\u00e4ndig \u00fcber TypeScript-Definitionen gesteuert. Gegr\u00fcndet wurde Payload CMS im Jahr 2018 von Elliot DeNolf, James Mikrut und Dan Ribbens. Payload CMS 1.0 wurde im Sommer 2022 ver\u00f6ffentlicht. Im Juni 2025 wurde Payload CMS von Figma gekauft. Dieser Bericht erl\u00e4utert die technischen Kernaspekte und Features des Systems.<\/p>\n
Payload CMS verfolgt das Prinzip \u201eCode-First\u201c. Das bedeutet, dass die gesamte Struktur des CMS \u2013 von den Datenmodellen bis hin zu den Zugriffsberechtigungen \u2013 direkt im Quellcode definiert wird.<\/p>\n
Beispielsweise werden Collections in Form eines JavaScript-Objektes definiert, wobei die einzelnen Feldtypen, Labels und weitere optionale Parameter wie Access-Beschr\u00e4nkungen und Default-Werte definiert<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Da die Schemas in TypeScript- oder JavaScript-Dateien definiert sind, k\u00f6nnen sie direkt im Git-Repository des Projekts versioniert werden. Dies bietet den Vorteil, dass \u00c4nderungen an der Datenstruktur synchron mit dem restlichen Anwendungscode entwickelt, getestet und ausgerollt werden k\u00f6nnen. Ein manuelles Nachpflegen von Feldern in einer Weboberfl\u00e4che nach einem Deployment entf\u00e4llt.<\/p>\n
Innerhalb der Schemas lassen sich komplexe Validierungslogiken hinterlegen. Neben einfachen Pflichtfeldern k\u00f6nnen mittels Funktionen (Custom Validations) beliebige Pr\u00fcfungen durchgef\u00fchrt werden.<\/p>\n
![\"\"](\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2026\/01\/validierung-300x215.png\")
<\/p>\n
Zus\u00e4tzlich bietet Payload ein m\u00e4chtiges Hook-System. Diese „Hooks“ erm\u00f6glichen es, in den Lebenszyklus von Datenoperationen einzugreifen:<\/p>\n
beforeChange<\/code>, afterChange<\/code>, beforeDelete<\/code>, etc.<\/li>\n- Field Hooks:<\/strong> Diese beziehen sich auf einzelne Felder und erlauben beispielsweise die Transformation von Daten beim Lesen oder Schreiben.<\/li>\n<\/ul>\n
<\/p>\n
![\"\"](\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2026\/01\/hooks-300x263.png\")
<\/p>\n
3. Datenmodellierung: Collections und Globals<\/h2>\n
In Payload werden Inhalte in zwei Hauptkategorien unterteilt: Collections und Globals.<\/p>\n
\n- Collections:<\/strong> Diese dienen der Verwaltung von Listen gleichartiger Datenobjekte, wie zum Beispiel Blog-Artikel, Produkte oder Nutzerprofile. Jedes Dokument in einer Collection erh\u00e4lt eine eindeutige ID.<\/li>\n
- Globals:<\/strong> Diese sind f\u00fcr singul\u00e4re Daten gedacht, die nur einmal im System existieren. Typische Beispiele sind Konfigurationen f\u00fcr den Header einer Website, SEO-Metadaten oder allgemeine Einstellungen.<\/li>\n<\/ul>\n
<\/p>\n
![\"\"](\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2026\/01\/globals-und-collection-300x152.png\")
<\/p>\n
<\/h2>\n
<\/p>\n
<\/p>\n
4. Fields und Field Types<\/h2>\n
Die Struktur von Collections und Globals wird durch Fields definiert. Payload bietet eine breite Palette an Feldtypen, die in verschiedene Kategorien unterteilt werden k\u00f6nnen:<\/p>\n
\n- Einfache Felder (Simple Fields):<\/strong>
Text<\/code>, Number<\/code>, Email<\/code>, Date<\/code>, Checkbox<\/code>.<\/li>\n- Auswahlfelder:<\/strong>
Select<\/code> (Dropdown), Radio Group<\/code>.<\/li>\n- Beziehungsfelder:<\/strong>
Relationship<\/code> (Verkn\u00fcpfung zu anderen Collections), Upload<\/code> (f\u00fcr Medien wie Bilder oder PDFs).<\/li>\n- Layout- und Strukturfelder:<\/strong> *
Group<\/code>: Fasst Felder logisch zusammen.\n\nArray<\/code>: Erlaubt wiederholbare Datens\u00e4tze innerhalb eines Dokuments.<\/li>\nBlocks<\/code>: Erm\u00f6glicht das Erstellen flexibler Layouts, bei denen Redakteure aus vordefinierten Inhaltsbl\u00f6cken (z. B. Text-Bild-Block, Hero-Sektion, Zitat) w\u00e4hlen k\u00f6nnen.<\/li>\nTabs<\/code>: Dient der optischen Strukturierung im Admin-Panel.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/p>\n
5. Datenbankagnostik<\/h2>\n
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\u00e4r zwei Ans\u00e4tze unterst\u00fctzt:<\/p>\n
\n- MongoDB:<\/strong> \u00dcber den Mongoose-Adapter (dokumentenorientiert).<\/li>\n
- Relational (SQL):<\/strong> \u00dcber den Drizzle-Adapter werden PostgreSQL und SQLite unterst\u00fctzt. Diese Flexibilit\u00e4t erlaubt es Entwicklern, die Datenbank passend zu den Projektanforderungen oder der vorhandenen Infrastruktur zu w\u00e4hlen<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2026\/01\/datenbankagnostik-300x73.png\")
<\/p>\n
6. Schnittstellen: Local API, REST und GraphQL<\/h2>\n
Payload stellt die Inhalte \u00fcber drei verschiedene Wege bereit, je nachdem, von wo aus auf die Daten zugegriffen werden soll.<\/p>\n
6.1 Local API<\/h3>\n
Die Local API ist eine Besonderheit von Payload. Sie erm\u00f6glicht es, innerhalb desselben Node.js-Prozesses (z. B. in Next.js Server Components) auf die Daten zuzugreifen, ohne einen Umweg \u00fcber HTTP-Requests zu gehen. Dies ist hochperformant und umgeht Netzwerklatenzen sowie Authentifizierungsaufwand \u00fcber Header.<\/p>\n
6.2 REST und GraphQL<\/h3>\n
F\u00fcr externe Anwendungen generiert Payload automatisch standardisierte Endpunkte:<\/p>\n
\n- REST API:<\/strong> Bietet klassische Endpunkte wie
\/api\/posts<\/code>, inklusive umfangreicher Query-Parameter zum Filtern und Sortieren.<\/li>\n- GraphQL API:<\/strong> Payload erstellt automatisch ein vollst\u00e4ndiges, typisiertes GraphQL-Schema. Dies ist besonders vorteilhaft f\u00fcr Frontends, die nur spezifische Teildaten abfragen m\u00f6chten (Overfetching-Vermeidung).<\/li>\n<\/ul>\n
7. Access Control (Zugriffskontrolle)<\/h2>\n
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\u00f6nnen Funktionen geschrieben werden, die den Zugriff basierend auf dem eingeloggten Nutzer oder dem Inhalt des Dokuments erlauben oder verweigern. Ein Beispiel w\u00e4re, dass „Autoren“ nur ihre eigenen Beitr\u00e4ge bearbeiten d\u00fcrfen, w\u00e4hrend „Admins“ vollen Zugriff haben.<\/p>\n
8. Erweiterbarkeit (Extensibility)<\/h2>\n
Payload ist darauf ausgelegt, \u00fcber den Standardfunktionsumfang hinaus erweitert zu werden:<\/p>\n
\n- Admin UI:<\/strong> Da das Admin-Panel auf React basiert, k\u00f6nnen eigene Komponenten (Custom Components) eingebunden werden, um die Redaktionsoberfl\u00e4che anzupassen.<\/li>\n
- Eigene Endpunkte:<\/strong> Es k\u00f6nnen zus\u00e4tzliche Express- oder Next.js-Routen definiert werden, um spezialisierte Logik abzubilden.<\/li>\n
- Plugins:<\/strong> Wiederkehrende Funktionalit\u00e4ten (z. B. eine Cloudinary-Anbindung oder SEO-Tools) k\u00f6nnen in Plugins gekapselt und einfach in verschiedene Projekte integriert werden.<\/li>\n<\/ul>\n
9. BPMN-Diagramm<\/h2>\n
![\"\"](\"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-content\/uploads\/2026\/01\/bpmn-1-300x115.png\")
<\/p>\n
10. Fazit<\/h2>\n
Payload CMS bietet durch seinen Code-First-Ansatz und die tiefe Integration von TypeScript eine hohe Entwicklungsqualit\u00e4t und Wartbarkeit. Die Kombination aus Datenbankflexibilit\u00e4t, granularem Rechtemanagement und vielf\u00e4ltigen Schnittstellen (insbesondere der Local API) macht es zu einem leistungsf\u00e4higen Werkzeug f\u00fcr komplexe, individuelle Webprojekte. W\u00e4hrend der Verzicht auf eine reine No-Code-Konfiguration die Einstiegsh\u00fcrde f\u00fcr Nicht-Entwickler erh\u00f6ht, \u00fcberwiegen f\u00fcr professionelle Entwicklungsteams die Vorteile der vollen Kontrolle \u00fcber den Code und die Datenstruktur.<\/p>\n
Quellen:<\/strong><\/h2>\n