The addition of live collaboration to web apps across the internet has been one of our favorite trends of the past two decades. As we interact with each other from increasingly distant parts of the globe, live collaboration allows us to interact over the web without feeling that gap.

Implementing live collaboration for your app natively can be a difficult task(trust us, we’re currently doing it for our Web IDE), but it may not always be necessary.

Today, we’ll be covering Snippyly, an exciting new tool that lets you quickly implement live collaboration to your web app!

What is Snippyly?

Snippyly is an API that you can easily add onto any web application to add live collaboration. With just a few lines of code you can have your team view the same document and see each other’s cursors, read each other's comments, and even share audio.

How does it work?

Snippyly can be implemented via CDN or NPM, so whatever you’re building, odds are that Snippyly is compatible.

There are a few key components to know about that you’ll implement:

Document: The unique page where collaboration is going to happen. Users on the same document would be able to see/interact with each other. Snippyly can either generate it automatically based on the URL, or you can explicitly define the document id.

Presence: The display that shows you who is online and active right now. Snippyly provides a default UI that is fully customizable.

Live Cursors: Exactly what it sounds like. Snippyly has a quick implementation to let users see their teams’ cursors.

Live State Sync: The way to live share any Javascript object you’d like. This is where the real collaboration comes in

What does an implementation look like?

I’m not exaggerating when I say implementation only takes minutes. Here is a vanilla javascript implementation of Snippyly via CDN:

A lot of tools end up taking just as much time to implement than just building it natively – The same can’t be said of Snippyly. No need to worry about WebSockets, Auth, or anything of the sort. Just bring in the CDN, connect your key, implement a couple functions, and then you have live collaboration up and working (Not to mention half of the above implementation is just explicitly creating the user profiles).

Play around with it yourself!

You can play with a live demo for the above app here, and learn more about Snippyly here.