@superviz/yjs
v1.0.2
Published
SuperViz provides powerful SDKs and APIs that enable developers to easily integrate real-time features into web applications. Our platform accelerates development across various industries with robust, scalable infrastructure and a low-code approach.
Downloads
990
Readme
SuperViz Yjs Provider
SuperViz provides powerful SDKs and APIs that enable developers to easily integrate real-time features into web applications. Our platform accelerates development across various industries with robust, scalable infrastructure and a low-code approach.
The SuperVizYjsProvider component enables real-time collaboration and synchronization using Yjs, a library for building collaborative applications. It supports offline editing, real-time updates, and awareness for all participants within a shared room.
Overview
The SuperVizYjsProvider
component is a powerful tool for enabling real-time collaboration within shared rooms using Yjs, a state-of-the-art Conflict-free Replicated Data Type (CRDT) implementation. Yjs is a robust library designed for building collaborative applications that can handle concurrent edits seamlessly.
By leveraging Yjs's CRDT technology, the SuperVizYjsProvider
ensures that all participants in a room can edit shared content simultaneously without conflicts. This component facilitates:
- Offline editing: Users can make changes even when disconnected, with automatic synchronization upon reconnection.
- Real-time updates: All participants see changes instantly as they occur.
- Conflict resolution: The CRDT algorithm automatically merges concurrent edits without data loss.
- Awareness: Participants can see each other's presence and actions within the shared document.
This integration brings the power of Yjs's distributed data structures to SuperViz, enabling highly responsive and reliable collaborative experiences across various types of content, from text documents to complex data structures.
Quickstart
To add the SuperVizYjsProvider component to your application, follow these steps:
JavaScript
Before we start: Initialize a room with a defined name and ID for the participant and the group.
Install the package:
npm install --save @superviz/yjs yjs
Import the necessary components:
import { SuperVizYjsProvider } from "@superviz/yjs"; import * as Y from "yjs";
Initialize Yjs document:
const doc = new Y.Doc();
Add the SuperVizYjsProvider:
const provider = new SuperVizYjsProvider(doc); room.addComponent(provider);
Configure SuperVizYjsProvider (Optional):
const provider = new SuperVizYjsProvider(doc, { awareness: false }); room.addComponent(provider);
React
Before we start: Initialize a room and an editor such as Monaco or Quill.
Install the package:
npm install --save @superviz/react-sdk yjs
Import and add the YjsProvider component:
import { YjsProvider } from "@superviz/react-sdk"; import * as Y from "yjs"; import { useEffect, useState } from "react"; function CollaborativeEditor() { const [doc, setDoc] = useState(null); useEffect(() => { const yDoc = new Y.Doc(); setDoc(yDoc); }, []); if (!doc) return null; return ( <YjsProvider doc={doc}> {/* Your collaborative editor component */} </YjsProvider> ); } export default CollaborativeEditor;
Configure YjsProvider (Optional):
<YjsProvider doc={doc} awareness={false}> {/* Your collaborative editor component */} </YjsProvider>
Using the useYjsProvider Hook:
import { useYjsProvider } from "@superviz/react-sdk"; function CollaborativeComponent() { const { setLocalState, setLocalStateField, getStates, getLocalState, provider } = useYjsProvider(); // Use these methods as needed }
Handling Events:
<YjsProvider doc={doc} onMount={() => console.log("Component mounted")} onUnmount={() => console.log("Component unmounted")} onConnect={() => console.log("Connected to room")} onDisconnect={() => console.log("Disconnected from room")} onMessage={({ message, data }) => console.log("Received message", message, data)} onOutgoingMessage={({ message, data }) => console.log("Sending message", message, data)} onSync={() => console.log("Synced with latest updates")} onDestroy={() => console.log("Component destroyed")} onStateChange={(state) => console.log("Provider state changed", state)} > {/* Your collaborative editor component */} </YjsProvider>
For more information, please refer to the Yjs Provider API Reference.
Contributing
To report a new bug, request a new feature, or if you need any help, you can file an issue on GitHub. We have a few templates to help you out.
License
SuperViz Yjs Provider is licensed under the BSD 2-Clause License.