realtimecursor/sdk/README.md

Real-time collaboration system with cursor tracking and approval workflow

# RealtimeCursor SDK

A free and open-source real-time collaboration SDK with live cursor tracking.

## Features

- **Real-time Cursor Tracking**: See other users' cursors in real-time
- **Collaborative Editing**: Edit documents together with multiple users
- **User Presence**: See who's currently viewing and editing
- **Typing Indicators**: Know when other users are typing
- **React Integration**: Easy-to-use React hooks and components
- **Vanilla JS Support**: Use with any JavaScript framework

## Installation

### npm

```bash
npm install realtimecursor-sdk
```

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/realtimecursor-sdk/dist-cdn/realtimecursor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/realtimecursor-sdk/dist-cdn/realtimecursor.min.css">
```

## Usage

### React

```jsx
import React, { useState, useRef } from 'react';
import { useRealtimeCursor, CursorOverlay } from 'realtimecursor-sdk';
import 'realtimecursor-sdk/dist/cursor.css';

function CollaborativeEditor() {
  const [content, setContent] = useState('');
  const editorRef = useRef(null);
  
  const { 
    cursors, 
    updateCursor, 
    updateContent,
    collaborators 
  } = useRealtimeCursor({
    apiUrl: 'https://api.realtimecursor.com', // Or your self-hosted server
    projectId: 'your-project-id',
    user: {
      id: 'user-123',
      name: 'John Doe'
    }
  });

  const handleMouseMove = (e) => {
    updateCursor({
      x: e.clientX,
      y: e.clientY
    });
  };

  const handleChange = (e) => {
    const newContent = e.target.value;
    setContent(newContent);
    updateContent(newContent);
  };

  return (
    <div className="editor-container">
      <textarea
        ref={editorRef}
        value={content}
        onChange={handleChange}
        onMouseMove={handleMouseMove}
      />
      <CursorOverlay cursors={cursors} />
    </div>
  );
}
```

### Vanilla JavaScript

```javascript
import { RealtimeCursor } from 'realtimecursor-sdk';
import 'realtimecursor-sdk/dist/cursor.css';

// Initialize the cursor client
const cursorClient = new RealtimeCursor({
  apiUrl: 'https://api.realtimecursor.com', // Or your self-hosted server
  projectId: 'your-project-id',
  user: {
    id: 'user-123',
    name: 'John Doe'
  }
});

// Connect to the real-time service
cursorClient.connect();

// Update cursor position on mouse move
document.addEventListener('mousemove', (e) => {
  cursorClient.updateCursor({
    x: e.clientX,
    y: e.clientY
  });
});

// Update content on change
editor.addEventListener('input', (e) => {
  cursorClient.updateContent(e.target.value);
});
```

## Self-Hosting

You can self-host the RealtimeCursor backend server:

```bash
# Clone the repository
git clone https://github.com/sourabhpunase/realtimecursor.git
cd realtimecursor

# Install dependencies
npm install

# Start the server
npm start
```

## Documentation

For detailed documentation, visit [our GitHub repository](https://github.com/sourabhpunase/realtimecursor).

## License

MIT