{"id":17726577,"url":"https://github.com/pawcoding/astro-integration-pocketbase","last_synced_at":"2025-08-18T11:08:47.368Z","repository":{"id":258745091,"uuid":"868161201","full_name":"pawcoding/astro-integration-pocketbase","owner":"pawcoding","description":"A integration for Astro adding a toolbar for users of astro-loader-pocketbase","archived":false,"fork":false,"pushed_at":"2025-08-17T08:11:37.000Z","size":707,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-17T08:23:50.798Z","etag":null,"topics":["astro","astro-integration","astro-integration-pocketbase","pocketbase","withastro"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-integration-pocketbase","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pawcoding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-05T16:25:44.000Z","updated_at":"2025-08-10T08:14:43.000Z","dependencies_parsed_at":"2024-10-25T21:18:33.919Z","dependency_job_id":"17d86bba-7f33-4063-9810-e2651313f929","html_url":"https://github.com/pawcoding/astro-integration-pocketbase","commit_stats":null,"previous_names":["pawcoding/astro-integration-pocketbase"],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/pawcoding/astro-integration-pocketbase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawcoding%2Fastro-integration-pocketbase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawcoding%2Fastro-integration-pocketbase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawcoding%2Fastro-integration-pocketbase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawcoding%2Fastro-integration-pocketbase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pawcoding","download_url":"https://codeload.github.com/pawcoding/astro-integration-pocketbase/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawcoding%2Fastro-integration-pocketbase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270982194,"owners_count":24679447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astro-integration","astro-integration-pocketbase","pocketbase","withastro"],"created_at":"2024-10-25T17:05:59.766Z","updated_at":"2025-08-18T11:08:47.347Z","avatar_url":"https://github.com/pawcoding.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# astro-integration-pocketbase\n\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/pawcoding/astro-integration-pocketbase/release.yaml?style=flat-square)\n[![NPM Version](https://img.shields.io/npm/v/astro-integration-pocketbase?style=flat-square)](https://www.npmjs.com/package/astro-integration-pocketbase)\n[![NPM Downloads](https://img.shields.io/npm/dw/astro-integration-pocketbase?style=flat-square)](https://www.npmjs.com/package/astro-integration-pocketbase)\n[![GitHub License](https://img.shields.io/github/license/pawcoding/astro-integration-pocketbase?style=flat-square)](https://github.com/pawcoding/astro-integration-pocketbase/blob/master/LICENSE)\n[![Discord](https://img.shields.io/discord/484669557747875862?style=flat-square\u0026label=Discord)](https://discord.gg/GzgTh4hxrx)\n\nThis package provides an Astro toolbar for users of [astro-loader-pocketbase](https://github.com/pawcoding/astro-loader-pocketbase) to view PocketBase data directly in the Astro dev server.\n\n![PocketBase Toolbar](https://github.com/pawcoding/astro-integration-pocketbase/blob/master/assets/toolbar.png?raw=true)\n\n## Compatibility\n\n| Integration | Loader | Astro | PocketBase |\n| ----------- | ------ | ----- | ---------- |\n| 1.0.0       | 2.0.0  | 5.0.0 | \u003e= 0.23.0  |\n| 2.0.0       | 2.0.0  | 5.0.0 | \u003e= 0.23.0  |\n\n## Basic usage\n\n_For the toolbar to work, you need to have the [`astro-loader-pocketbase`](https://www.npmjs.com/package/astro-loader-pocketbase) package installed and configured in your project._\n\nTo use the toolbar, you need to import the `pocketbaseIntegration` function and add it to the `integrations` array in your Astro config file.\n\n```ts\nimport { pocketbaseIntegration } from \"astro-integration-pocketbase\";\nimport { defineConfig } from \"astro/config\";\n\nexport default defineConfig({\n  integrations: [\n    pocketbaseIntegration({\n      // Make sure to use the same URL as in your pocketbaseLoader configuration\n      url: \"https://\u003cyour-pocketbase-url\u003e\"\n    })\n  ]\n});\n```\n\nAfter adding the integration to your Astro config, you can start the dev server and see the PocketBase icon in the toolbar.\nIf you click on the icon, you can see the PocketBase entity viewer.\n\nIf a loader is found, the viewer will show a refresh button to reload all entries from the loaders.\n\n## Realtime updates\n\n### Basic setup\n\nPocketBase allows you to subscribe to collection changes via its [Realtime API](https://pocketbase.io/docs/api-realtime/).\nThis integration allows you to subscribe to these changes and reload the entries / collections.\nNote that Node.js currently does not support the [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) API, so the integration uses the [eventsource](https://www.npmjs.com/package/eventsource) package to provide the same functionality.\n\nIf you want realtime updates for collections with a [restricted list / search rule](https://pocketbase.io/docs/api-rules-and-filters/), you need to provide superuser credentials to the integration.\n\n```ts\npocketbaseIntegration({\n  ...options,\n  // List of PocketBase collections to watch for changes\n  collectionsToWatch: [\"posts\", \"comments\"],\n  // Superuser credentials for restricted collections (optional)\n  superuserCredentials: {\n    email: \"\u003csuperuser-email\u003e\",\n    password: \"\u003csuperuser-password\u003e\",\n    // or\n    impersonateToken: \"\u003csuperuser-impersonate-token\u003e\"\n  }\n});\n```\n\n**Tip:** You can disable the realtime updates temporarily via the toolbar.\n\n### Advanced setup\n\nIf you work with view collections, you need some more advanced options to get the realtime updates working as expected.\nSince [view collections don't receive realtime events](https://pocketbase.io/docs/collections/#view-collection), you need to watch the source base collection instead, by providing one or more collections to watch.\n\n```ts\npocketbaseIntegration({\n  ...options,\n  collectionsToWatch: {\n    // Same effect as basic setup watching the same collection\n    // Recommended for basic / auth collections\n    users: true,\n    // Watch the source collection(s) of a view collection\n    // Recommended for view collections\n    postings: [\"posts\", \"comments\"]\n  }\n});\n```\n\nWhen using `true`, the integration will subscribe and reload the entries of the same collection mentioned in the key.\nWhen using an array of other collections, the integration will subscribe to changes of collections given in the array and reload the entries of the collection mentioned in the key.\n\n## Entity viewer\n\nTo view the PocketBase entries inside the entity viewer, you need to use `Astro.props` to pass the entries to your page (and thus to the toolbar).\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    Example page with PocketBase entries from a collection\n  \u003c/summary\u003e\n\n```astro\n---\nimport { render, getCollection } from \"astro:content\";\nimport type { CollectionEntry } from \"astro:content\";\n\ninterface Props {\n  entry: CollectionEntry\u003c\"\u003cyour-collection\"\u003e\n}\n\nexport async function getStaticPaths() {\n  const entries = await getCollection(\"\u003cyour-collection\u003e\");\n  return entries.map((entry) =\u003e ({\n    params: { id: entry.id },\n    props: { entry },\n  }));\n}\n\nconst { entry } = Astro.props;\nconst { Content } = await render(entry);\n---\n\n\u003carticle\u003e\n  \u003ch1\u003e{entry.data.title}\u003c/h1\u003e\n  \u003cContent /\u003e\n\u003c/article\u003e\n```\n\n\u003c/details\u003e\n\nThe integration will automatically detect PocketBase entries in the props and display them in the entity viewer.\n\n## All options\n\n| Option                 | Type                                                                  | Required | Description                                                                                                                                        |\n| ---------------------- | --------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `url`                  | `string`                                                              | x        | The URL of your PocketBase instance.                                                                                                               |\n| `collectionsToWatch`   | `Array\u003cstring\u003e \\| Record\u003cstring, true \\| Array\u003cstring\u003e\u003e`              |          | Collections to watch for changes.                                                                                                                  |\n| `superuserCredentials` | `{ email: string, password: string } \\| { impersonateToken: string }` |          | The email and password or impersonate token of a superuser of the PocketBase instance. This is used for realtime updates of restricted collection. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawcoding%2Fastro-integration-pocketbase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpawcoding%2Fastro-integration-pocketbase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawcoding%2Fastro-integration-pocketbase/lists"}