onpage for TanStack Start
Fügt TanStack-Start-Seiten, die Inhalte aus Payload lesen, Inline-Bearbeitung und Draft-Vorschauen hinzu.
Installation
pnpm add @payload-onpage/tanstack-start Über
Das Paket verbindet ein TanStack-Start-Frontend mit dem Plugin payload-onpage in Payload. Die Site bindet die Komponente `<OnPage />` in der Root-Route ein. Besucher sehen davon nichts. Angemeldete Editoren und Personen, die einen Vorschau-Link öffnen, erhalten auf der Seite ein Bearbeitungs-Overlay bzw. eine Vorschau-Toolbar. Die serverseitige Logik liegt im Entry `/session`, der nur auf dem Server importiert werden darf. `tanstackSession({ secret, maxAge })` wird an die Option `session` des Plugins übergeben. Der Bearbeitungsmodus wird in einem httpOnly-Cookie `onpage` gespeichert, das an einen Hash des Payload-Auth-Cookies des Editors gebunden ist. Meldet sich der Editor ab oder wechselt das Konto, endet die Bearbeitungssitzung. Die Lebensdauer beträgt standardmäßig 12 Stunden und lässt sich über `maxAge` ändern. Bei Vorschau-Links erhält der Browser nur ein verschlüsseltes Cookie `onpage_preview`, das auf einen Pfad und ein Ablaufdatum begrenzt ist. Es funktioniert auf keinem anderen Pfad und wird mit dem Plugin-Secret entschlüsselt. Ohne dieses Secret zeigen geteilte Vorschau-Links nur veröffentlichte Inhalte. In Loadern entscheidet `isDraftEnabled()`, ob Payload-Abfragen mit `draft: true` laufen. Es liefert `true` für Bearbeitungssitzungen und gültige Vorschau-Grants. `onpageContext()` setzt im Bearbeitungsmodus ein Kontext-Flag, damit sich gerenderte Felder ihren Quelldokumenten zuordnen lassen. Außerhalb eines Requests, etwa beim Build, liefern beide Funktionen sichere Standardwerte. Der Client-Entry exportiert `OnPageMount` und `useTanstackRefresh`. Aktualisierungen laufen über `router.invalidate()` aus dem TanStack Router. Über die Prop `mount` lassen sich eigene Mount-Komponenten übergeben, etwa für eigene Editoren für JSON-Felder. Das Paket setzt React 19, `@tanstack/react-start` ab 1.168.60 und `@tanstack/react-router` ab 1.120.0 voraus. Es benötigt Node.js 20.9 oder neuer. Die aktuelle Version ist 0.5.0, lizenziert unter MIT.
Paketinformationen
- Paketname
@payload-onpage/tanstack-start- Neueste Version
0.6.0- Entpackte Größe
- 61 kB
- Lizenz
- MIT
- Wöchentliche Downloads
- 335
- Zuletzt veröffentlicht
- 13. Okt. 2026
Mehr von jellologic
Profil ansehenOn-Page Editing
Ergänzt Payload-Collections und Globals um Inline-Bearbeitung direkt auf der Next.js-Seite, mit Draft-Speicherung und Preview-Links.
Lexical Inline Rich Text Editor
Bearbeitet Payload-richText-Felder direkt auf der gerenderten Seite per Klick, ohne das Admin-Formular zu öffnen.
OnPage for Next.js App Router
Next.js-App-Router-Adapter für payload-onpage: Inline-Bearbeitung und Draft-Vorschau für Payload-Seiten mit OnPage-Komponente.
onpage core
Framework-unabhängiger Kern für Click-to-Edit-Vorschauen, die über die Payload REST API als Entwurf speichern.
On-Page React Editor
Stellt eine Inline-Editor-Oberfläche für Payload-Seiten in React-Frontends bereit, mit Toolbars, Feldeditoren und Element-Annotationen.
Ähnliche Plugins
Mehr in ContentSitemap
Erzeugt sitemap.xml aus Payload-Collections und statischen URLs und legt die Dateien im Storage-Adapter des Projekts ab.
Structured Markdown
Bietet strukturiertes Markdown-Editing für Payload CMS mit erweiterten Bearbeitungsfunktionen.
AI Plugin
Integriert KI-Funktionen zur Inhaltserstellung in Payload CMS.