Awesome Open Source
Awesome Open Source

slate-collaborative. Check demo

slatejs collaborative plugin & microservice


A little experiment for co-editing.

Based on idea of



Use it as a simple slatejs plugin

import { withIOCollaboration } from '@slate-collaborative/client'

const collaborationEditor = withIOCollaboration(editor, options)

Check detailed example


  docId?: // document id
  url?: string // url to open connection
  connectOpts?: SocketIOClient.ConnectOpts // options
  cursorData?: any // any data passed to cursor
  onConnect?: () => void // connect callback
  onDisconnect?: () => void // disconnect callback
  onError?: (reason: string) => void // error callback
  preserveExternalHistory?: boolean // preserve slate-history operations form other clients

You need to attach the useCursor decorator to provide custom cursor data in renderLeaf function

import { useCursor } from '@slate-collaborative/client'

const decorator = useCursor(editor)


const { SocketIOConnection } = require('@slate-collaborative/backend')

const connection = new SocketIOConnection(options)


  entry: Server // or specify port to start io server
  defaultValue: Node[] // default value
  saveFrequency: number // frequency of onDocumentSave callback execution in ms
  onAuthRequest: ( // auth callback
    query: Object,
    socket?: SocketIO.Socket
  ) => Promise<boolean> | boolean
  onDocumentLoad: ( // request slate document callback
    pathname: string,
    query?: Object
  ) => Promise<Node[]> | Node[]
  onDocumentSave: (pathname: string, doc: Node[]) => Promise<void> | void // save document callback


You welcome to contribute!

start it ease:

yarn dev

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (247,619
Reactjs (71,016
Collaboration (717
Rich Text Editor (254
Crdt (169
Related Projects