open-index/open-npm huggingface dataset:
npm package: @rgby/collab-client
Description: A powerful real-time collaboration SDK for building modern web applications. Built on top of [Yjs](https://github.com/yjs/yjs) and [Hocuspocus](https://github.com/ueberdosis/hocuspocus), providing a seamless experience for shared editing, comments, presen
Latest version: 1.0.1

# @collab/client

A powerful real-time collaboration SDK for building modern web applications. Built on top of [Yjs](https://github.com/yjs/yjs) and [Hocuspocus](https://github.com/ueberdosis/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

```bash
npm install @collab/client
```

## Quick Start

### 1. Initialize the Client

```typescript
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

```typescript
// 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**](./VANILLA.md): Detailed guide for using the SDK in any JavaScript environment.
- [**Vue.js Guide**](./VUE.md): Learn how to use the provided Vue composables for reactive collaborative state.