Collaborative Apps over Matrix using the Collabs Library
Matthew Weidner
App frontend
Collabs
(collaborative data structures)
Matrix network
Element
Widget
matrix-widget-api
room event
data structure op
App frontend
Collabs
(collaborative data structures)
Element
Widget
event
. . .
User 1
User 2
other users
Users
✅ E2EE
✅ Federated &
self-hostable
✅ Open-source tech stack
Developers
✅ Deploy w/ static site
✅ Matrix handles user
accounts, scaling, …
✅ Forkable
Modified from an app by Jennifer Hoffman, https://horse.jenniferhoffman.net/horse-color-genetics.html
Collabs is a TypeScript library of client-side collaborative data structures (specifically, CRDTs).
// Whiteboard state: a collaborative Map.
boardState: LwwCMap<[x: number, y: number], string>;
// When user draws:
boardState.set(pt, color);
// Respond to changes (possibly external):
boardState.on("Set", (event) => {
ctx.fillStyle = boardState.get(event.key)!;
ctx.fillRect(event.key[0], event.key[1], GRAN, GRAN);
});
Collabs is a collections library, not just a set of CRDT implementations.
Thank you!
Huairui Qi
CMU (M.S. 2020)
Ignacio Maronna
CMU (M.S. 2020)
Maxime Kjaer
EPFL/CMU (M.S. 2021)
Ria Pradeep
CMU (B.S. 2021)
Benito Geordie
Rice
Heather Miller
CMU, Faculty Advisor