Payload Funktions-Demo

Was bietet Payload?

Open Source Headless CMS. Unten: jede Funktion mit Kurz Erklärung, Admin-Ort und Frontend-Test.

Backend-Tour (Payload Admin)

Öffne die Links im Admin (eingeloggt). So siehst du dieselbe Datenwelt, die das Frontend über die API abfragt.

1. 1. Collections

   Schau dir Artikel, Kategorien, Tags, Media und Users an. Felder, Relationen und Blocks siehst du im Dokument.

2. 2. Globals

   Global und Über uns: genau ein Datensatz, ideal für Settings und statische Seiten.

3. 3. Media

   Dateien hochladen und in Upload-Felder einfügen.

4. 4. Users & Auth

   Auth-Collection: Login, JWT, Access Control für API-Writes.

5. 5. Versions / Drafts

   Artikel öffnen → Entwurf speichern, veröffentlichen, Versionsverlauf prüfen.

6. 6. Live Preview

   Artikel öffnen → Live Preview. Änderungen erscheinen im Frontend-Iframe.

7. 7. GraphQL Playground

   GraphQL ist eingebaut – Queries gegen dieselbe Datenwelt testen.

8. 8. Access Control

   Public sieht nur published; Create/Update/Delete brauchen User-Token.

9. 9. Blocks

   Im Artikel Blocks hinzufügen: Hero, Quote, Rich Text.

10. 10. Preview

    Artikel öffnen → Preview. Draft und Published im Frontend prüfen.

Preview & Live Preview

Was ist das? Preview zeigt den Eintrag im Frontend. Live Preview rendert das Frontend als Iframe neben dem Editor.

Backend: Artikel / Über uns / Kategorie öffnen → Preview oder Live Preview. Frontend: Route /api/preview setzt Status und leitet weiter.

Globals

Was ist das? Genau ein Datensatz pro Typ – ideal für Settings und Über-uns. Keine Liste, sondern «das eine» Dokument.

Collections, Relationen & Feldtypen

Was ist das? Collections = viele Einträge (Artikel, Kategorien, Tags). Hier siehst du Relationen, Depth, Medien, Groups, Enums, JSON, Zahlen, Booleans.

Kategorien: 2 · Tags: 2 · Artikel total: 2 · Seite 1/1

Drafts & Versions

Was ist das? Collections können Entwurf und Live-Version haben. Die öffentliche API liefert published; mit draft=true und Auth siehst du Entwürfe.

REST: where, sort, page, limit, depth

Was ist das? Die REST API akzeptiert Query-Parameter wie where, sort, page, limit, depth, locale, draft.

Authentication

Was ist das? Auth für Collections mit auth: true. Access Control steuert API-Rechte. Public = ohne Token, Authenticated = mit JWT.

null

CRUD über die API

Was ist das? Create / Read / Update / Delete. Lesen ist öffentlich (published); Schreiben braucht JWT.

Media / Upload

Was ist das? Upload-Collection im Admin. Per API: POST /api/media (multipart file + _payload).

GraphQL, Localization, Hooks & Co.

Diese Funktionen sind vor allem im Admin/Code sichtbar – hier die Kurzführer:

• GraphQL: Eingebaut. https://payload.frankzinsli.ch/api/graphql-playground
• Localization: In payload.config Locales definieren. API: ?locale=de.
• Hooks: beforeChange, afterChange, afterRead usw. in Collections.
• Plugins: SEO, Form Builder, Redirects, Search, S3 Storage.
• Jobs: Hintergrundaufgaben und Workflows.
• Custom Endpoints: eigene Routen in Config/Collections.
• Lexical: Rich-Text-Editor (diese Demo nutzt textarea + Blocks).
• TypeScript: npm run generate:types → payload-types.ts.

Rohdaten (letzte API-Antwort)

Zum Debuggen: genau die JSON-Antwort von Payload. So siehst du Struktur, id, Relationen und Pagination-Meta.

Veröffentlichte Artikel

{
  "docs": [
    {
      "id": 2,
      "title": "Filter und Pagination testen",
      "slug": "filter-und-pagination-testen",
      "excerpt": "Mit diesem Eintrag Filters, Sortierung und Seitengrösse prüfen.",
      "content": "Probiere where[title][contains]=Filter und limit=1.",
      "cover": null,
      "gallery": [],
      "isFeatured": false,
      "views": 3,
      "rating": 3.2,
      "statusLabel": "in_review",
      "publishedOn": "2026-08-05T00:00:00.000Z",
      "eventAt": null,
      "readingTime": null,
      "contactEmail": null,
      "meta": null,
      "seo": {
        "metaTitle": null,
        "metaDescription": null,
        "shareImage": null
      },
      "category": {
        "id": 2,
        "name": "Anleitungen",
        "slug": "anleitungen",
        "description": "Kategorie für How-tos und Filter-Tests",
        "articles": {
          "docs": [
            2
          ],
          "hasNextPage": false
        },
        "updatedAt": "2026-08-14T15:26:21.346Z",
        "createdAt": "2026-08-14T15:26:21.346Z",
        "_status": "published"
      },
      "tags": [
        {
          "id": 2,
          "name": "Demo",
          "slug": "demo",
          "updatedAt": "2026-08-14T15:26:21.363Z",
          "createdAt": "2026-08-14T15:26:21.363Z"
        }
      ],
      "author": null,
      "updatedAt": "2026-08-14T15:26:21.488Z",
      "createdAt": "2026-08-14T15:26:21.488Z",
      "_status": "published",
      "blocks": []
    },
    {
      "id": 1,
      "title": "Willkommen in der Payload-Demo",
      "slug": "willkommen-in-der-payload-demo",
      "excerpt": "Erster Demo-Artikel mit Relationen, Komponenten, Blocks und vielen Feldtypen.",
      "content": "## Hallo\n\nDieser Artikel wurde automatisch geseedet, damit du Collections, REST API und Preview testen kannst.",
      "cover": null,
      "gallery": [],
      "isFeatured": true,
      "views": 12,
      "rating": 4.5,
      "statusLabel": "ready",
      "publishedOn": "2026-08-06T00:00:00.000Z",
      "eventAt": "2026-08-14T15:26:21.367Z",
      "readingTime": "00:05:00",
      "contactEmail": "demo@example.com",
      "meta": {
        "quelle": "seed",
        "prioritaet": 1
      },
      "seo": {
        "metaTitle": "Willkommen Demo",
        "metaDescription": "Geseedeter Payload-Demoartikel auf Deutsch",
        "shareImage": null
      },
      "blocks": [
        {
          "id": "6a7f339d1628380033ae4dd1",
          "title": "Hero aus dem Blocks-Feld",
          "subtitle": "Wiederverwendbare Blöcke im Artikel",
          "image": null,
          "blockName": null,
          "blockType": "hero",
          "cta": {
            "label": "Admin öffnen",
            "url": "/admin",
            "isExternal": false,
            "id": "6a82e99e23e745014af30cf3"
          }
        },
        {
          "id": "6a7f339d1628380033ae4dd2",
          "body": "Payload und Nuxt machen Content-Tests einfach.",
          "author": "Demo Bot",
          "blockName": null,
          "blockType": "quote"
        }
      ],
      "category": {
        "id": 1,
        "name": "Nachrichten",
        "slug": "nachrichten",
        "description": "Kategorie für aktuelle Beiträge (Collection + Relation)",
        "articles": {
          "docs": [
            1
          ],
          "hasNextPage": false
        },
        "updatedAt": "2026-08-14T15:26:21.322Z",
        "createdAt": "2026-08-14T15:26:21.320Z",
        "_status": "published"
      },
      "tags": [
        {
          "id": 1,
          "name": "Payload",
          "slug": "payload",
          "updatedAt": "2026-08-14T15:26:21.357Z",
          "createdAt": "2026-08-14T15:26:21.357Z"
        },
        {
          "id": 2,
          "name": "Demo",
          "slug": "demo",
          "updatedAt": "2026-08-14T15:26:21.363Z",
          "createdAt": "2026-08-14T15:26:21.363Z"
        }
      ],
      "author": null,
      "updatedAt": "2026-08-14T15:26:21.387Z",
      "createdAt": "2026-08-14T15:26:21.386Z",
      "_status": "published"
    }
  ],
  "hasNextPage": false,
  "hasPrevPage": false,
  "limit": 5,
  "nextPage": null,
  "page": 1,
  "pagingCounter": 1,
  "prevPage": null,
  "totalDocs": 2,
  "totalPages": 1
}