@collab/client

A powerful real-time collaboration SDK for building modern web applications. Built on top of Yjs and Hocuspocus, providing a seamless experience for shared editing, comments, presence, and file uploads.

Features

• 🔄 Real-time Sync: Effortless data synchronization across clients using Yjs.
• 🔌 Offline Support: Built-in IndexedDB persistence for offline editing.
• 💬 Comments: Integrated commenting system with threads and resolving.
• 👥 Presence: Real-time user awareness (cursors, selections).
• 📂 File Uploads: Resumable file uploads with offline queue support.
• 🌳 Document Management: Hierarchical document structure (spaces, folders).
• ⚡ Framework Agnostic: Core logic works with any framework.
• 💚 Vue Composables: First-class support for Vue 3.

Installation

npm install @collab/client

Quick Start

1. Initialize the Client

import { CollabClient } from '@collab/client';

const client = new CollabClient({
    baseUrl: 'https://api.your-collab-server.com',
    authClient: {
        // Implement your auth logic here if using custom auth
    },
    managedAuth: {
        // Or use the built-in managed auth
        autoRefresh: true
    }
});

2. Connect to a Document

// Connect to a specific document within a space
const provider = await client.getProvider('space-id', 'document-id');

// Access the Yjs document
const yDoc = provider.document;
const yText = yDoc.getText('content');

// Observe changes
yText.observe(() => {
    console.log('Content updated:', yText.toString());
});

Documentation

• Vanilla JS Guide: Detailed guide for using the SDK in any JavaScript environment.
• Vue.js Guide: Learn how to use the provided Vue composables for reactive collaborative state.