Quickstart
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.
SuperViz YJS Provider
To add the SuperVizYjsProvider component to your application, follow the steps below:
Before we start
Before utilizing the SuperVizYjsProvider component, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the SuperVizYjsProvider component.
Install the package
Install the Yjs provider package with npm:
npm install --save @superviz/yjs yjs
Import the necessary components
After installing the package, import the SuperVizYjsProvider component and Yjs:
import { SuperVizYjsProvider } from "@superviz/yjs";
import * as Y from "yjs";
Initialize Yjs document
Create a new Yjs document:
const doc = new Y.Doc();
Add the SuperVizYjsProvider
Initialize the SuperVizYjsProvider with the Yjs document and add it to your SuperViz room:
const provider = new SuperVizYjsProvider(doc);
room.addComponent(provider);
Configure SuperVizYjsProvider (Optional)
You can customize the SuperVizYjsProvider by passing configuration options when initializing it. For example, to disable awareness:
const provider = new SuperVizYjsProvider(doc, { awareness: false });
room.addComponent(provider);