(2021-12-03) Pixelpusher Realtime Peertopeer Collaboration With React

InkAndSwitch announces Pixelpusher Real-time peer-to-peer collaboration with React. Pixelpusher is an experiment in local-first development. It’s a multi-user collaborative pixel art editor that is truly serverless.

React and Redux

Pixelpusher is built on Electron, a kind of hybrid of application runtime and web browser from GitHub. Electron lets you build desktop applications using both client-side and server-side web technologies. Being a locally installed application means that, although you do have to install it, you never have to worry about it being unavailable when you need it most. Further, building with Electron lets us do work that isn’t possible in the browser, such as storing files locally and opening certain kinds of network connections.

The second is that Pixelpusher is a local-first application. All the the data and the code it needs to work lives your local machine, and is shared peer-to-peer with other clients as needed. This means the API can’t go down, because there is no API. Even without access to the broader internet you can still collaborate with other people by directly transmitting data from one user’s device to another.

First, to share your art with another Pixelpusher user, you simply send them the pxlpshr:// URL found above the drawing. When your friend opens up that URL, they’ll see a live window into your work right away

First, a user takes an action in Pixelpusher, like clicking on a pixel to set its color. That action creates a Redux action that travels through the reducer to update the state object. In your reducer, you’ll make some of those changes inside a special “change” block that records all the changes you make to that data structure.

To send those changes to your collaborators we append them to a log of actions, all chained together and signed by a private key. Using a peer-to-peer network protocol, described below, we send that log to any collaborator devices that are online.

First, the change generation and reconstitution is performed by Automerge, a JSON-like CRDT (conflict-free replicated data-type). CRDTs are a special kind of data structure designed to support distributed systems, and they guarantee eventual consistency across unreliable networks.

The data sharing is built using two components borrowed from the dat project called hypercore and discovery-swarm. Hypercore implements the signed log of changes and a protocol for distributing them, and discovery-swarm is a brilliant hack that handles finding and connecting to peers using either mDNS/Bonjour for local connections, or by piggy-backing on the public Bittorrent DHT to find peers beyond your local network.

you can check out the code from Github and take a look at how it all works. I would especially recommend taking a look at the example chat application in hypermerge to see how easy this can all be to use.

Pixelpusher is an Ink & Switch project built by Jeff Peterson, Jim Pick, and Peter van Hardenberg.