Open this page in multiple browser windows to see the real-time collaboration in action.
npm install realtimecursor-sdk
<script src="https://cdn.jsdelivr.net/npm/realtimecursor-sdk@1.1.0/dist-cdn/realtimecursor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/realtimecursor-sdk@1.1.0/dist-cdn/realtimecursor.min.css">
// Initialize the cursor client
const cursorClient = new RealtimeCursor({
apiUrl: 'https://your-api-url.com',
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
editor.addEventListener('mousemove', (e) => {
cursorClient.updateCursor({
x: e.clientX,
y: e.clientY
});
});
// Update content on change
editor.addEventListener('input', (e) => {
cursorClient.updateContent(e.target.value);
});See other users' cursors in real-time as they move around the document.
Edit documents together with multiple users simultaneously.
See who's currently viewing and editing the document.
Know when other users are typing with real-time indicators.