Official package · Realtime building blocks

Live cursors, avatars and edit locks

Collaboration on presence channels: who is here and where, live cursors, component locks so two people don’t edit the same field, and follow mode for presenting.

@hibira-io/spacesLive demo ↗npm ↗GitHub ↗

• Members with a profile and a location, such as the page or slide they are on.
• Cursor points go out five times a second and replay at their original pace, so motion looks smooth.
• lock() fails for a field someone else holds, and a member’s locks go away when they leave.

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

1. Install

   npm install @hibira-io/spaces pusher-js

2. Use it

   import { Space } from '@hibira-io/spaces';
   
   const pusher = new Pusher('YOUR_APP_KEY', {
     cluster: 'hkg',
     wsHost: 'ws.hibira.io',
     channelAuthorization: { endpoint: '/spaces/auth' },
   });
   const space = Space.enter(pusher, 'presence-space-doc-42', { profile: { color: '#e5484d' } });
   space.on('members', ({ members }) => renderAvatars(members));
   space.on('cursor', ({ id, member, x, y }) => drawCursor(id, member, x, y));

Before you start

• Turn on Allow client events in the app’s settings, so players can send each other moves and taps.
• Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.

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 →