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:

1

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.

2

Install the package

Install the Yjs provider package with npm:

npm install --save @superviz/yjs yjs

3

Import the necessary components

After installing the package, import the SuperVizYjsProvider component and Yjs:

import { SuperVizYjsProvider } from "@superviz/yjs";
import * as Y from "yjs";

4

Initialize Yjs document

Create a new Yjs document:

const doc = new Y.Doc();

5

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);

6

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);

7

Next steps

You are now all set! See what else you can do:

SuperViz YJS Provider​