What is yjs?
Yjs is a high-performance, CRDT-based (Conflict-free Replicated Data Type) library that enables real-time collaboration on shared data structures. It is designed to be used in collaborative applications where multiple users can edit the same data simultaneously without conflicts.
What are yjs's main functionalities?
Shared Text Editing
Yjs allows multiple users to collaboratively edit a shared text document in real-time. The changes are synchronized across all connected clients using WebRTC.
const Y = require('yjs');
const { WebrtcProvider } = require('y-webrtc');
const doc = new Y.Doc();
const provider = new WebrtcProvider('my-room-name', doc);
const yText = doc.getText('shared-text');
yText.insert(0, 'Hello, world!');
// Listen for changes
yText.observe(event => {
console.log('Text changed:', yText.toString());
});
Shared Array
Yjs supports shared arrays, allowing users to collaboratively manipulate arrays in real-time. Changes are synchronized across all clients.
const Y = require('yjs');
const { WebrtcProvider } = require('y-webrtc');
const doc = new Y.Doc();
const provider = new WebrtcProvider('my-room-name', doc);
const yArray = doc.getArray('shared-array');
yArray.push(['item1', 'item2']);
// Listen for changes
yArray.observe(event => {
console.log('Array changed:', yArray.toArray());
});
Shared Map
Yjs provides shared maps, enabling users to collaboratively edit key-value pairs in real-time. Changes are synchronized across all clients.
const Y = require('yjs');
const { WebrtcProvider } = require('y-webrtc');
const doc = new Y.Doc();
const provider = new WebrtcProvider('my-room-name', doc);
const yMap = doc.getMap('shared-map');
yMap.set('key1', 'value1');
yMap.observe(event => {
console.log('Map changed:', yMap.toJSON());
});
Undo/Redo
Yjs includes an UndoManager that allows users to undo and redo changes made to shared data structures, providing a better user experience in collaborative applications.
const Y = require('yjs');
const { WebrtcProvider } = require('y-webrtc');
const { UndoManager } = require('yjs');
const doc = new Y.Doc();
const provider = new WebrtcProvider('my-room-name', doc);
const yText = doc.getText('shared-text');
const undoManager = new UndoManager(yText);
yText.insert(0, 'Hello, world!');
undoManager.undo();
undoManager.redo();
Other packages similar to yjs
automerge
Automerge is a library for building collaborative applications using CRDTs. It provides similar functionality to Yjs, such as real-time collaboration on shared data structures. However, Automerge is known for its simplicity and ease of use, while Yjs is often praised for its performance and flexibility.
sharedb
ShareDB is a real-time database backend based on Operational Transformation (OT). It allows multiple users to collaborate on the same data in real-time. While ShareDB uses OT, Yjs uses CRDTs, which can be more efficient and easier to reason about in some scenarios.
gun
Gun is a decentralized, real-time, graph database that supports real-time collaboration. It uses a different approach compared to Yjs, focusing on decentralized data storage and synchronization. Gun is highly scalable and can be used for building large-scale collaborative applications.
Yjs is a framework for optimistic concurrency control and automatic conflict resolution on arbitrary data types. The framework implements a new OT-like concurrency algorithm and provides similar functionality as ShareJs and OpenCoweb. Yjs was designed to take away the pain from concurrently editing complex data types like Text, Json, and XML. You can find some applications for this framework here.
In the future, we want to enable users to implement their own collaborative types. Currently we provide data types for
Unlike other frameworks, Yjs supports P2P message propagation and is not bound to a specific communication protocol. Therefore, Yjs is extremely scalable and can be used in a wide range of application scenarios.
We support several communication protocols as so called Connectors. You find a bunch of Connectors in the y-connectors repository. Currently supported communication protocols:
You can use Yjs client-, and server- side. You can get it as via npm, and bower. We even provide a polymer element for Yjs!
The theoretical advantages over similar frameworks are support for
- .. P2P message propagation and arbitrary communication protocols
- .. arbitrary complex data types
- .. offline editing: Only relevant changes are propagated on rejoin (unimplemented)
- .. AnyUndo: Undo any action that was executed in constant time (unimplemented)
- .. Intention Preservation: When working on Text, the intention of your changes are preserved. This is particularily important when working offline.
Use it!
You find a tutorial, examples, and documentation on the website.
Either clone this git repository, install it with bower, or install it with npm.
Bower
bower install rwth-acis/yjs
Then you include the libraries directly from the installation folder.
<script src="./bower_components/yjs/y.js"></script>
Npm
npm install yjs --save
And use it like this with npm:
Y = require("yjs");
Status
Yjs is still in an early development phase. Don't expect that everything is working fine.
But I would become really motivated if you gave me some feedback :) (github).
Current Issues
- The History Buffer should be able to store operations in a database
- Documentation
- Reimplement support for XML as a data type
- Custom data types
Support
Please report any issues to the Github issue page!
I would appreciate if developers give me feedback on how convenient the framework is, and if it is easy to use. Particularly the XML-support may not support every DOM-methods - if you encounter a method that does not cause any change on other peers, please state function name, and sample parameters. However, there are browser-specific features, that Y won't support.
License
Yjs is licensed under the MIT License.
kevin.jahns@rwth-aachen.de