Tldraw became viral by converting its product to multiplayer with Liveblocks

Challenge

Tldraw is a browser-based open-source drawing application created by Steve Ruiz. Steve always wanted to make the experience collaborative but had specific challenges to overcome.

Because Tldraw is something that’s meant to be embedded into other applications, it was critical for them to keep the multiplayer layer isolated from the core of the application. That way, engineers could implement their own backend solution without having to rearchitect the whole codebase.

Tldraw being a visual creative tool, they also needed a multiplayer undo/redo API that was able to pause the history as people are moving shapes around in the tool. Without this ability, people would have to hit undo hundreds of times to get a shape to its previous location before they started moving it around the canvas.

Solution

Tldraw ended up using Liveblocks Presence and Storage APIs to make their product multiplayer. They were able to handle the multiplayer side of things without sprinkling Liveblocks code all over their codebase.

They used the Presence API to figure out who’s connected to a document so that they could show live cursors and selection for those people. It’s also worth noting that Tldraw uses perfect-cursors, a library to create perfect interpolation for animated multiplayer cursors on top of the Liveblocks Presence API.

They also used the Storage API to automatically persist and share the state of the document between connected users, as well as handling multiplayer undo/redo.

Results

Tldraw now offers a true realtime multiplayer experience to their users, which helped Tldraw’s ability to spread virally. Now people can simply share a link to be instantly collaborating with someone else in the same document. In three months, Tldraw saw 15,000 collaborative rooms created.

“Tldraw’s ability to spread virally exists just because of the multiplayer. There is no login, you just share a link and you’re there with someone else collaborating. Liveblocks has made a big difference in terms of how people are introduced to the product and how it spreads. This wouldn’t have been possible without Liveblocks technology.”

Steve RuizFounder of Tldraw