Official package · Frameworks

Live content for Payload CMS

A Payload 3 plugin that sends an event when editors publish, update or delete, and <LiveRefresh> for Next.js, which refreshes the page’s server components when its content changes. Pages stay static or cached, and it runs on Vercel.

@hibira-io/payloadnpm ↗GitHub ↗

• Choose the collections and globals to watch, and the fields each event carries.
• A save never fails because of the realtime service: a failed send is logged and the save goes through.
• useLiveChanges() for your own handling, and subscribe() for frontends other than Next.js.

Sign in to see these snippets with your own cluster host. Sign in

1. Install

   npm install @hibira-io/payload pusher-js
   
   # .env
   HIBIRA_APP_ID=YOUR_APP_ID
   HIBIRA_APP_SECRET=YOUR_APP_SECRET
   NEXT_PUBLIC_HIBIRA_APP_KEY=YOUR_APP_KEY
   NEXT_PUBLIC_HIBIRA_HOST=ws.hibira.io

2. Set it up

   // payload.config.ts
   import { hibiraPlugin } from '@hibira-io/payload';
   
   export default buildConfig({
     plugins: [
       hibiraPlugin({
         collections: { posts: true, products: { fields: ['price', 'stock'] } },
         globals: { header: true },
       }),
     ],
   });

3. Use it

   // app/(frontend)/posts/[slug]/page.tsx
   import { LiveRefresh } from '@hibira-io/payload/react';
   
   export default async function Post({ params }) {
     const post = await getPost((await params).slug);
     return (
       <article>
         <LiveRefresh collection="posts" id={post.id} />
         <h1>{post.title}</h1>
       </article>
     );
   }

Before you start

• The app secret is shown only once, when you create the app or rotate its secret. Keep it on your server, never in a browser or game build.
• On the Free plan, list every origin your pages load from in the app’s allowed origins (http://localhost:3000 while developing, then your domain). "*" needs a paid plan.
• The channels are public, so only list fields any visitor may see. On the Free plan, an event over 4 KB is sent without the fields.

Use the app key from your dashboard; the secret stays on your server. Channels, events and authorization endpoints work exactly as they do with Pusher. Create your free account →