home / skills / harborgrid-justin / lexiflow-premium / real-time-collaborative-editing

real-time-collaborative-editing skill

/frontend/.github-skills/real-time-collaborative-editing

This skill helps you implement real-time collaborative editing using CRDTs or OT, synchronized with React, to maintain a responsive multi-user UI.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill real-time-collaborative-editing

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

836 B

---
name: real-time-collaborative-editing
description: Build collaborative surfaces using CRDTs or OT, synchronized with React's update model.
---

# Real-Time Collaborative Editing

## Summary
Build collaborative surfaces using CRDTs or OT, synchronized with React's update model.

## Key Capabilities
- Bind CRDT structures (Yjs/Automerge) to React state.
- Handle presence awareness and cursor tracking efficiently.
- Resolve concurrent edits without locking the UI.

## PhD-Level Challenges
- Prove convergence of document state under high concurrency.
- Optimize re-renders for frequent remote operations.
- Implement local-first offline support with sync merging.

## Acceptance Criteria
- Demonstrate real-time sync between multiple clients.
- Provide conflict resolution test cases.
- Benchmark operation processing throughput.

Overview

This skill helps teams build real-time collaborative editing surfaces using CRDTs or Operational Transform (OT) techniques, tightly integrated with React's rendering model. It focuses on live synchronization, presence awareness, and conflict-free merging so users see consistent document state across clients. The implementation is geared for production use in premium legal management contexts where correctness and auditability matter.

How this skill works

The skill binds CRDT structures (for example Yjs or Automerge) to React state so remote operations produce predictable re-renders without blocking the UI. It tracks presence and cursor positions as lightweight shared objects, broadcasting minimal updates for smooth UX. Concurrent edits are merged deterministically by the CRDT/OT layer while the React adaptor batches local state updates to avoid excessive renders.

When to use it

Building multi-user document editors where low-latency collaboration is required
Adding live cursor and presence indicators to legal forms or contract review tools
Supporting offline-first workflows with automatic sync and merge on reconnect
Handling high-concurrency scenarios where optimistic local edits must converge
Replacing server-locked editing models to improve responsiveness and scalability

Best practices

Choose CRDTs (Yjs/Automerge) for strong convergence guarantees and simpler offline support; use OT if existing infrastructure relies on it
Bind CRDT updates to React via a single subscription layer and batch setState calls to minimize re-renders
Represent presence/cursors separately from document CRDTs to limit noise from frequent pointer updates
Add deterministic conflict-resolution tests and property-based tests to prove convergence under adversarial sequences
Benchmark operation throughput and tune message batching, awareness intervals, and compression for heavy loads

Example use cases

Collaborative contract drafting where multiple attorneys edit clauses and see each other's cursors
Shared annotation and redlining of legal documents with real-time presence indicators
Client intake forms that allow co-editing between a customer and an agent with offline edits merged later
Audit-ready change history for compliance, generated from CRDT operation logs
High-frequency collaborative workflows such as price negotiation spreadsheets or checklists

FAQ

Which is better for legal workflows: CRDT or OT?

CRDTs simplify convergence and offline support, making them a strong default for legal workflows; OT can work if you need compatibility with legacy servers.

How do you avoid excessive React re-renders?

Batch CRDT-to-React updates, subscribe at granular component levels, and separate frequent presence updates from document state.