TypeScript icon, indicating that this package has built-in type declarations

3.2.0 • Public • Published

Slate Yjs - Live Demo

codecov Maintenance Commitizen friendly Downloads npm tests semantic-release

Yjs bindings for Slate.

Heavily inspired by slate-collaborative


Via npm:

npm install slate-yjs

Via yarn:

yarn add slate-yjs

Why use slate-yjs over slate-collaborative?

Performance. slate-collaborative works well for small documents but can cause 20 seconds + load times on heavier ones which slate-yjs can load in a fraction of a second.

For a more in-depth comparison take a look at these benchmarks

You might also want to take a look at "CRDTs are the future" from the creator of sharedb



Adding a 2-way binding from the editor to a Yjs document is as easy as:

import { withYjs, SyncElement } from 'slate-yjs';
import * as Y from 'yjs';

const doc = new Y.Doc();
const sharedType = doc.getArray<SyncElement>('content');
const yjsEditor = withYjs(editor, sharedType);


Slate-yjs support syncing collaborative cursors using awareness:

import { withCursor, useCursors } from 'slate-yjs';

// Adds (and syncs) cursor information (anchor, focus) to the awareness local state.
const cursorEditor = withCursor(yjsEditor, provider.awareness);

// Returns a decorator that annotates text nodes with cursor information and
// a array containing all cursor information.
const { decorate, cursors } = useCursors(cursorEditor);

Example project

Take a look at the example project here


Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

  1. Fork the repo on GitHub
  2. Clone the project to your machine
  3. Commit changes to your branch
  4. Push your work back up to your fork
  5. Submit a Pull request so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!


DownloadsWeekly Downloads






Unpacked Size

177 kB

Total Files


Last publish


  • bitphinix