{"_id":"@brainwebuk/astro-payload-live-preview","_rev":"4-c5b349d454ec0978e7c07d2b2de8a645","name":"@brainwebuk/astro-payload-live-preview","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@brainwebuk/astro-payload-live-preview","version":"0.1.0","keywords":["astro","astro-component","withastro","payload","payloadcms","live-preview","cms","preview"],"author":{"url":"https://brainweb.co.uk","name":"BrainWeb","email":"ric@brainweb.co.uk"},"license":"MIT","_id":"@brainwebuk/astro-payload-live-preview@0.1.0","maintainers":[{"name":"ricbwood","email":"ric@brainweb.co.uk"}],"homepage":"https://github.com/BrainWeb/astro-payload-live-preview","bugs":{"url":"https://github.com/BrainWeb/astro-payload-live-preview/issues"},"dist":{"shasum":"7e53a5c6f23a36fd448f30ab2e6174889d7249e5","tarball":"https://registry.npmjs.org/@brainwebuk/astro-payload-live-preview/-/astro-payload-live-preview-0.1.0.tgz","fileCount":10,"integrity":"sha512-gBw/10awGHgNF5xjnsDHoVzp9Orl1GO/oS3kuXvXazaSF3HZowefEF0P2wNjPpsLznqzZ3GqFTedbC7etMel0w==","signatures":[{"sig":"MEUCIQCGMSOn7q0+Wd+5rhnioIV1KMjCnO/A2riicKt+6dGAygIgWsPzAkJ3ZQMKNe8MkTA7nxgF7UbDhQyb1glYnbI6kbc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19099},"main":"./dist/index.js","type":"module","_from":"file:brainwebuk-astro-payload-live-preview-0.1.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./client":{"types":"./dist/subscribeToRefresh.d.ts","import":"./dist/subscribeToRefresh.js","default":"./dist/subscribeToRefresh.js"}},"scripts":{"build":"pnpm copyfiles && pnpm build:types && pnpm build:swc","clean":"rimraf -g {dist,*.tsbuildinfo}","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths --ignore \"**/*.d.ts\"","copyfiles":"copyfiles -u 1 \"src/**/*.astro\" dist/","build:types":"tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"ricbwood","email":"ric@brainweb.co.uk"},"_resolved":"/private/var/folders/mb/5dc_bhdj03b8jk8xy2x4m3m80000gp/T/ca15cfa406d54ab45f6035e772894f14/brainwebuk-astro-payload-live-preview-0.1.0.tgz","_integrity":"sha512-gBw/10awGHgNF5xjnsDHoVzp9Orl1GO/oS3kuXvXazaSF3HZowefEF0P2wNjPpsLznqzZ3GqFTedbC7etMel0w==","repository":{"url":"git+https://github.com/BrainWeb/astro-payload-live-preview.git","type":"git","directory":"package"},"_npmVersion":"11.8.0","description":"Astro component for Payload CMS server-side Live Preview — refreshes your SSR routes when documents are saved in the admin panel","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","dependencies":{"@payloadcms/live-preview":"^3.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"6.0.1","@swc/cli":"0.7.9","@swc/core":"1.15.3","copyfiles":"2.4.1","typescript":"^5.7.3"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-payload-live-preview_0.1.0_1781268000180_0.15222548888251142","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.1":{"name":"@brainwebuk/astro-payload-live-preview","version":"0.1.1","keywords":["astro","astro-component","withastro","payload","payloadcms","live-preview","cms","preview"],"author":{"url":"https://brainweb.co.uk","name":"BrainWeb","email":"ric@brainweb.co.uk"},"license":"MIT","_id":"@brainwebuk/astro-payload-live-preview@0.1.1","maintainers":[{"name":"ricbwood","email":"ric@brainweb.co.uk"}],"homepage":"https://github.com/BrainWeb/astro-payload-live-preview","bugs":{"url":"https://github.com/BrainWeb/astro-payload-live-preview/issues"},"dist":{"shasum":"39692bf81aa29e48abe78c760aa9defb01c06008","tarball":"https://registry.npmjs.org/@brainwebuk/astro-payload-live-preview/-/astro-payload-live-preview-0.1.1.tgz","fileCount":10,"integrity":"sha512-25MLkYMm0ZxoxGo8n7QWWjuqQmO0qG4IGeIiiocIdWHfPUJNhR2l14tIU8nhTTwzKjoSCWfh4up8aoeQ+gwnZg==","signatures":[{"sig":"MEYCIQCDjAdUGbK177e3CiaTR5fz72KERlkdJAwo8+gTBLuzIQIhAODNsG7qsmnQKefYpXwE55g+YTLTTuSWW81xJagFFaK3","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19113},"main":"./dist/index.js","type":"module","_from":"file:brainwebuk-astro-payload-live-preview-0.1.1.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./client":{"types":"./dist/subscribeToRefresh.d.ts","import":"./dist/subscribeToRefresh.js","default":"./dist/subscribeToRefresh.js"}},"scripts":{"build":"pnpm copyfiles && pnpm build:types && pnpm build:swc","clean":"rimraf -g {dist,*.tsbuildinfo}","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths --ignore \"**/*.d.ts\"","copyfiles":"copyfiles -u 1 \"src/**/*.astro\" dist/","build:types":"tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"ricbwood","email":"ric@brainweb.co.uk"},"_resolved":"/private/var/folders/mb/5dc_bhdj03b8jk8xy2x4m3m80000gp/T/13fc13d3cf5256198fd1daa4b67743ce/brainwebuk-astro-payload-live-preview-0.1.1.tgz","_integrity":"sha512-25MLkYMm0ZxoxGo8n7QWWjuqQmO0qG4IGeIiiocIdWHfPUJNhR2l14tIU8nhTTwzKjoSCWfh4up8aoeQ+gwnZg==","repository":{"url":"git+https://github.com/BrainWeb/astro-payload-live-preview.git","type":"git","directory":"package"},"_npmVersion":"11.8.0","description":"Astro component for Payload CMS server-side Live Preview — refreshes your SSR routes when documents are saved in the admin panel","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","dependencies":{"@payloadcms/live-preview":"^3.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"6.0.1","@swc/cli":"0.7.9","@swc/core":"1.15.3","copyfiles":"2.4.1","typescript":"^5.7.3"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-payload-live-preview_0.1.1_1781454191528_0.420961893905869","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.1.4":{"name":"@brainwebuk/astro-payload-live-preview","version":"0.1.4","keywords":["astro","astro-component","withastro","payload","payloadcms","live-preview","cms","preview"],"author":{"url":"https://brainweb.co.uk","name":"BrainWeb","email":"ric@brainweb.co.uk"},"license":"MIT","_id":"@brainwebuk/astro-payload-live-preview@0.1.4","maintainers":[{"name":"ricbwood","email":"ric@brainweb.co.uk"}],"homepage":"https://github.com/BrainWeb/astro-payload-live-preview","bugs":{"url":"https://github.com/BrainWeb/astro-payload-live-preview/issues"},"dist":{"shasum":"1ceda2a95b456b07e2b804f9710ddc57578eed6b","tarball":"https://registry.npmjs.org/@brainwebuk/astro-payload-live-preview/-/astro-payload-live-preview-0.1.4.tgz","fileCount":10,"integrity":"sha512-GDOvDS6eWj9d42f8g6K0hcrQ4Mdim4LLN1UCzd1cw15JwB2WC90uAUHwbRVZxw3tYbBqA+F9R6pvfsGoX7acVw==","signatures":[{"sig":"MEUCIFxCht7jtCVb8KLkUoLraih04d/k6nH6/bR7GToxgIXiAiEAgAKBhBvzxDQ+2I9YV5mMvUsMCnSBsPAxIOZAiKqAUio=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@brainwebuk%2fastro-payload-live-preview@0.1.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19658},"main":"./src/index.ts","type":"module","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts","default":"./src/index.ts"},"./client":{"types":"./src/subscribeToRefresh.ts","import":"./src/subscribeToRefresh.ts","default":"./src/subscribeToRefresh.ts"}},"gitHead":"14f00dda97c063cc947191327256f8f4dce195d8","scripts":{"build":"pnpm copyfiles && pnpm build:types && pnpm build:swc","clean":"rimraf -g {dist,*.tsbuildinfo}","build:swc":"swc ./src -d ./dist --config-file .swcrc --strip-leading-paths --ignore \"**/*.d.ts\"","copyfiles":"copyfiles -u 1 \"src/**/*.astro\" dist/","build:types":"tsc --emitDeclarationOnly --outDir dist","prepublishOnly":"pnpm clean && pnpm build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:f5a03bbe-25f2-4e7c-a8ac-1e5a876d2963"}},"repository":{"url":"git+https://github.com/BrainWeb/astro-payload-live-preview.git","type":"git","directory":"package"},"_npmVersion":"11.17.0","description":"Astro component for Payload CMS server-side Live Preview — refreshes your SSR routes when documents are saved in the admin panel","directories":{},"sideEffects":false,"_nodeVersion":"22.22.3","dependencies":{"@payloadcms/live-preview":"^3.0.0"},"publishConfig":{"main":"./dist/index.js","types":"./dist/index.d.ts","access":"public","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./client":{"types":"./dist/subscribeToRefresh.d.ts","import":"./dist/subscribeToRefresh.js","default":"./dist/subscribeToRefresh.js"}},"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"rimraf":"6.0.1","@swc/cli":"0.7.9","@swc/core":"1.15.3","copyfiles":"2.4.1","typescript":"^5.7.3"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/astro-payload-live-preview_0.1.4_1781604813538_0.6563579885154616","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2026-06-12T12:39:59.953Z","modified":"2026-07-02T08:58:47.868Z","0.1.0":"2026-06-12T12:40:00.358Z","0.1.1":"2026-06-14T16:23:11.670Z","0.1.4":"2026-06-16T10:13:33.677Z"},"bugs":{"url":"https://github.com/BrainWeb/astro-payload-live-preview/issues"},"author":{"url":"https://brainweb.co.uk","name":"BrainWeb","email":"ric@brainweb.co.uk"},"license":"MIT","homepage":"https://github.com/BrainWeb/astro-payload-live-preview","keywords":["astro","astro-component","withastro","payload","payloadcms","live-preview","cms","preview"],"repository":{"url":"git+https://github.com/BrainWeb/astro-payload-live-preview.git","type":"git","directory":"package"},"description":"Astro component for Payload CMS server-side Live Preview — refreshes your SSR routes when documents are saved in the admin panel","maintainers":[{"name":"ricbwood","email":"ric@brainweb.co.uk"}],"readme":"# @brainwebuk/astro-payload-live-preview\n\n[Payload CMS](https://payloadcms.com) [Live Preview](https://payloadcms.com/docs/live-preview/overview) for [Astro](https://astro.build) — see your draft content update in the Payload admin panel as you type.\n\nThis package implements Payload's [server-side Live Preview](https://payloadcms.com/docs/live-preview/server) mode for Astro: every time a document is saved (draft save, autosave, or publish), the admin panel notifies your Astro site, which re-renders the route on the server and swaps the new HTML in place — no full page reload when you use Astro's `<ClientRouter />`.\n\n```\n┌─────────────────────────┐    save / autosave    ┌──────────────────────────┐\n│  Payload admin panel    │ ──── postMessage ───► │  Your Astro site (SSR)   │\n│  (Live Preview iframe)  │                       │  <RefreshRouteOnSave />  │\n└─────────────────────────┘                       │  → re-fetch + DOM swap   │\n                                                  └──────────────────────────┘\n```\n\n## Requirements\n\n- **Astro 4, 5, or 6 in SSR mode** — `output: 'server'` (or `export const prerender = false` on preview routes) with any adapter. Statically generated pages cannot reflect saved changes without a rebuild.\n- **Payload 3.x** running anywhere your Astro server can reach (separate app, same monorepo, etc.)\n- **Drafts + autosave** enabled on the collections you want to preview (autosave is what makes it feel live — set a low interval like `100`).\n\n## Installation\n\n```bash\nnpm install @brainwebuk/astro-payload-live-preview\n# or\npnpm add @brainwebuk/astro-payload-live-preview\n```\n\n## Usage\n\n**1. Configure Live Preview in your Payload config**, pointing at your Astro site. Include a preview secret so only the admin panel can see drafts:\n\n```ts\n// payload.config.ts\nexport default buildConfig({\n  admin: {\n    livePreview: {\n      collections: ['posts'],\n      url: ({ data }) =>\n        `${process.env.ASTRO_URL}/posts/${data.id}?preview=${process.env.PREVIEW_SECRET}`,\n    },\n  },\n  collections: [\n    {\n      slug: 'posts',\n      fields: [{ name: 'title', type: 'text', required: true }],\n      versions: {\n        drafts: {\n          autosave: { interval: 100 },\n        },\n      },\n    },\n  ],\n})\n```\n\n**2. Render `<RefreshRouteOnSave />` on your Astro page**, fetching drafts only when the preview secret matches:\n\n```astro\n---\n// src/pages/posts/[id].astro\nimport { RefreshRouteOnSave } from '@brainwebuk/astro-payload-live-preview'\n\nconst isPreview = Astro.url.searchParams.get('preview') === process.env.PREVIEW_SECRET\n\n// Fetch from Payload however you like: Local API, REST, or GraphQL.\n// Pass draft: true (Local API) or ?draft=true (REST) when previewing.\nconst post = await fetchPost(Astro.params.id, { draft: isPreview })\n\nif (!post) {\n  return new Response(null, { status: 404 })\n}\n---\n\n<h1>{post.title}</h1>\n{isPreview && <RefreshRouteOnSave serverURL={process.env.PAYLOAD_SERVER_URL} />}\n```\n\n`serverURL` is the origin of your Payload admin panel (e.g. `http://localhost:3000`). It is used to validate the origin of incoming `postMessage` events.\n\n**3. (Recommended) Add `<ClientRouter />` to your layout** for flicker-free refreshes:\n\n```astro\n---\nimport { ClientRouter } from 'astro:transitions'\n---\n<head>\n  <ClientRouter />\n</head>\n```\n\nWith `<ClientRouter />`, each save swaps the DOM in place and preserves scroll position. Without it, the component falls back to a standard full-page reload — still functional, just less smooth.\n\n## API\n\n### `<RefreshRouteOnSave serverURL={string} />`\n\nAstro component. Renders an invisible custom element that listens for Payload document events and refreshes the current route on each save.\n\n### `subscribeToRefresh({ serverURL, refresh })` / `unsubscribeFromRefresh(subscription)`\n\nLower-level helpers (also available from `@brainwebuk/astro-payload-live-preview/client`) if you want to wire up your own client script with a custom refresh strategy.\n\n## Fetching draft content\n\nYour Astro server runs separately from Payload, so draft access needs an explicit strategy. The pattern used here and in the [example](https://github.com/BrainWeb/astro-payload-live-preview/tree/main/example):\n\n1. Put a secret in the `admin.livePreview.url` query string (`?preview=...`).\n2. On the Astro side, compare it against the same secret from your environment.\n3. Only fetch with `draft: true` when it matches.\n\nIf you fetch over REST instead of the Local API, authenticate the server-to-server request (e.g. an API key user) since draft access requires an authenticated user by default.\n\n## Example\n\nThe [`example/`](https://github.com/BrainWeb/astro-payload-live-preview/tree/main/example) directory contains a complete working setup: a Payload app (`example/payload`) and an Astro site (`example/website`) sharing a MongoDB database via the Local API.\n\n```bash\npnpm install\n\n# copy the .env examples and adjust if needed\ncp example/payload/.env.example example/payload/.env\ncp example/website/.env.example example/website/.env\n\n# requires MongoDB on localhost:27017 (e.g. docker run -p 27017:27017 mongo)\npnpm dev:payload   # Payload admin on http://localhost:3000\npnpm dev:website   # Astro site on http://localhost:4321\n```\n\nThen open a post in the admin panel and select the **Live Preview** tab. Edits autosave and appear in the preview pane as you type.\n\n## How it works\n\n- Payload's admin panel embeds your Astro page in an iframe (or popup) and emits a `payload-document-event` via `window.postMessage` on every save.\n- This package's component sends the [`ready`](https://payloadcms.com/docs/live-preview/server#building-your-own-router-refresh-component) handshake, listens for document events (validating the event origin against `serverURL`), and refreshes via `navigate()` from `astro:transitions/client` — falling back to `window.location.reload()` when view transitions aren't enabled.\n- Unlike Payload's React `RefreshRouteOnSave`, it deliberately does **not** refresh on mount: Astro SSR pages are freshly rendered when the iframe loads them, and a mount-time refresh would loop under the full-reload fallback.\n\n## Development\n\nThis is a pnpm workspace:\n\n- `package/` — the publishable package (source in `package/src`, the example consumes it directly so changes apply immediately)\n- `example/` — the Payload + Astro demo apps\n\n```bash\npnpm build    # build the package (dist/)\npnpm release  # build + publish to npm\n```\n\n## License\n\n[MIT](https://github.com/BrainWeb/astro-payload-live-preview/blob/main/LICENSE.md)\n\n---\n\nBuilt and maintained by [BrainWeb](https://www.brainweb.co.uk/), a web design studio in Norfolk, UK\n","readmeFilename":"README.md"}