onpage for TanStack Start

About

This package connects a TanStack Start front end to the payload-onpage plugin running in Payload. A site mounts an `<OnPage />` component in its root route. Visitors see nothing from it. Editors who are signed in to Payload, and people who open a preview link, get an editing overlay or a preview toolbar on the page itself. The server side lives in the `/session` entry, which must be imported only on the server. `tanstackSession({ secret })` is passed to the plugin's `session` option. It writes an `onpage` mode cookie that is bound to a hash of the editor's Payload auth cookie, so signing out or switching accounts ends the edit session. Preview links work differently: the browser receives only a sealed `onpage_preview` grant for one path, and reads unseal it with the plugin secret. The grant expires on its own and does not work on other paths. The `secret` option must match the plugin secret. Without it, shared previews fall back to published content. In loaders, `isDraftEnabled()` decides whether to pass `draft: true` to Payload reads, and `onpageContext()` adds a context flag in edit mode so the rendered fields can be mapped back to their source documents. Both helpers return safe defaults outside a request, such as during builds. The client entry exports `OnPageMount` and `useTanstackRefresh`. A custom mount can be passed through the `mount` prop to supply custom field editors. Refreshes go through TanStack Router's `router.invalidate()`. The package requires React 19, TanStack Start, and TanStack Router, and it targets Node 20.9 or newer.

Package info

Package name

@payload-onpage/tanstack-start

Latest version

0.5.0

Unpacked size

56 kB

License

MIT

Last publish

Oct 12, 2026