Litepad RTC Editor

About this Demo

The Litepad editor is just 100 lines of code, yet it is a fully functional real-time collaborative text editor. It uses WebSockets to share messages across all the connected clients.

The Code

In the client, the editor's change and socket's refresh/change are handled like this:

let socket = io.connect()
//Editor
editor.on("change", function (i, op) {
  socket.emit("change", op)
  socket.emit("refresh", editor.getValue())
})

//Socket events
socket.on("refresh", function (data) {
  editor.setValue(data.body)
})
socket.on("change", function (data) {
  console.log("Change received:", data)
  editor.replaceRange(data.text, data.from, data.to)
})

In the server, a socket connection, refresh and change are handled as follows:

let body = "Welcome to Litepad RTC Editor"

io.sockets.on("connection", function (socket) {
  socket.emit("refresh", { body }) //Propagate the value to the connected client

  //Socket events
  socket.on("refresh", function (_body) {
    body = _body
  })
  socket.on("change", function (op) {
    if (op.origin == "+input" || op.origin == "paste" || op.origin == "+delete")
      socket.broadcast.emit("change", op)
  })
})

That's it! This is probably the simplest implementation of a real-time collaborative text editor that you can find. It is a great starting point if you want to create your own real-time collaborative editor or to create -like I did- my own Virtual Shell in the browser with authentication and persistence.

See Also

If you are interested in a more complex implementation of a real-time collaborative text editor, you can check the following projects: