liveblocks / javascript-canvas-presence-only

Liveblocks

Presence Block demo with an existing REST API

This repository contains a tiny demo to show how the Liveblocks Presence Block can be used on an existing "canvas" application.

Because it does not use the Liveblocks Storage, the conflict resolution is suboptimal but it's a low cost solution to add collaborative features on top on an existing app that uses REST calls.

Demo.mov

Run demo locally

• Install all dependencies with npm install
• Create an account on liveblocks.io
• Copy your secret key from the administration
• Create a file named .env and add your Liveblocks secret as environment variable LIVEBLOCKS_SECRET_KEY=sk_test_yourkey
• Run npm run dev and go to http://localhost:3000

How it's working

This demo uses the following packages:

• @liveblocks/client to broadcast messages to other users in the room
• @liveblocks/node to implement the liveblocks authentication endpoint.
• Express for the server
• Esbuild to generate the front-end bundle