Welcome to Learn Yjs — an interactive tutorial series on building realtime collaborative applications using the Yjs CRDT library.

This very page is an example of a realtime collaborative application. Every other cursor in the garden above is a real live person reading the page right now. Click one of the plants to change it for everyone else!

Learn Yjs starts with the basics of Yjs, then covers techniques for handling state in distributed applications. We’ll talk about what a CRDT is, and why you’d want to use one. We’ll get into some of the pitfalls that make collaborative applications difficult and show how you can avoid them. There will be explorable demos and code exercises so you can get a feel for how Yjs really works.

Here’s an example of an explorable demo. Each box below represents a client — a separate computer running an app that uses Yjs. When you interact with either client, the changes are automatically synced to the other one. You can control the latency with the slider on the top left to see how clients would interact over a network.

Ready to learn?

Great — let’s get started! Click on the button below to visit Lesson 1.

Lesson 01

Introduction

About this site

Learn Yjs is a project by Jamsocket, a platform for building realtime apps. The live cursors and multiplayer garden on this page are powered by Y-Sweet, our open source Yjs server with built-in persistence.

The website is built with Astro. The interactive demos and exercises are built with React and Yjs.