Skip to main content

Sync providers

So far, we've focused mostly on how to change to state on a synced store, and how to listen (react to) changes and display them in your application.

How to share changes between users of your application?

When you update data on the store, an incremental change, or update is captured and can be shared between users. These updates can be shared between users of your application with different Sync Providers. So far, we've used y-webrtc that shares updates over WebRTC (and BroadcastChannel), but you might be interested in different providers for production-ready use cases.

y-webrtc​

Propagates document updates peer-to-peer using WebRTC. The peers exchange signaling data over signaling servers. Publically available signaling servers are available. Communication over the signaling servers can be encrypted by providing a shared secret, keeping the connection information and the shared document private.

import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";

export const store = syncedStore({ arrayData: [] });

const doc = getYjsDoc(store);
const webrtcProvider = new WebrtcProvider("my-document-id", doc);

y-indexeddb for offline storage​

Efficiently persists document updates to the browsers indexeddb database. The document is immediately available and only diffs need to be synced through the network provider.

You can use y-indexeddb along side other providers, to store an offline copy of the document in the browser, but also share updates with other users. For example, to use both y-indexeddb and y-webrtc:

import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebrtcProvider } from "y-webrtc";
import { IndexeddbPersistence } from "y-indexeddb";

export const store = syncedStore({ arrayData: [] });

const doc = getYjsDoc(store);
const webrtcProvider = new WebrtcProvider("my-document-id", doc);
const provider = new IndexeddbPersistence("my-document-id", doc);

y-websocket​

A module that contains a simple websocket backend and a websocket client that connects to that backend. The backend can be extended to persist updates in a leveldb database.

import { syncedStore, getYjsDoc } from "@syncedstore/core";
import { WebsocketProvider } from "y-websocket";

export const store = syncedStore({ arrayData: [] });

const doc = getYjsDoc(store);

// Start a y-websocket server, e.g.: HOST=localhost PORT=1234 npx y-websocket-server

const wsProvider = new WebsocketProvider("ws://localhost:1234", "my-roomname", doc);

Matrix-CRDT​

Use Matrix as a backend for SyncedStore by using the MatrixProvider from Matrix-CRDT. Matrix.org is an open network for secure, decentralized communication. By using Matrix as a Sync Provider, you can focus building your client app and Matrix can provide powerful features like Authentication, Authorization, Federation, hosting (self-hosting or SaaS) and even End-to-End Encryption (E2EE).

Hocuspocus​

Hocuspocus is the open source backend to bring real-time syncing, collaborative text editing and true collaboration to your application today. Get started in minutes, scale to millions.