Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

yjs

Package Overview
Dependencies
Maintainers
0
Versions
286
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

yjs

Shared Editing Library

  • 13.6.20
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
584K
decreased by-18.68%
Maintainers
0
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 13 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc