Collaboration for Quoin, operated for you.

The demo, not a video

Running on this service, right now, served from this application rather than a deployment of its own: the editor, presence, comments and the AI assistant. Open it in two tabs and type in both.

Three steps, and the third is nothing

1. Your application decides who the reader is

   Your users never reach us to prove who they are, and we never learn anything about them. Your server mints a short-lived token naming the room, and, if you would rather count people than connections, an opaque id for the reader. The format is an HMAC over base64url JSON, which is this much code.

   import { createHmac } from 'node:crypto';
   
   const roomToken = (claims, secret) => {
     const body = Buffer.from(JSON.stringify(claims)).toString('base64url');
     return `${body}.${createHmac('sha256', secret).update(body).digest('base64url')}`;
   };
   
   // In your own route, once you already know who is asking.
   roomToken(
     {
       room: 'design-notes',
       exp: Math.floor(Date.now() / 1000) + 300,
       project: process.env.QUOIN_PROJECT_ID,
       subject: reader.id,
     },
     process.env.QUOIN_SIGNING_SECRET,
   );

2. The browser opens a provider with that token

   Any y-websocket client will do, because the protocol is y-websocket's. There is nothing of ours to install in the browser unless you want the smaller purpose-built client.

   import * as Y from 'yjs';
   import { WebsocketProvider } from 'y-websocket';
   
   const doc = new Y.Doc();
   const token = await fetch('/api/room-token/design-notes').then((r) => r.text());
   
   const provider = new WebsocketProvider(
     'wss://quoincloud.com/api/collab',
     'design-notes',
     doc,
     { params: { token } },
   );

3. There is no third step

   Hand the Yjs document to the editor's collaboration extension and you are finished. That part is documented on the editor's own site, which is where everything about the editor lives.