Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Off the heels of our big upgrades for Professor Mode, we’ve just upgraded Collab Mode as well. As similar as these PRO features are, they are actually quite different under the hood. Where Professor Mode is all about broadcasting to many, Collab Mode is about intimately working with a few.

Collab Mode also adds to complexity of keeping the code multiple people are writing in sync. In our first several backend iterations of Collab Mode, we tackled this task on our own. We worked on it a lot. There are probably more man-hours in Collab Mode than any other part of CodePen. It got better. But now we’ve found a better way.

You know who’s pretty good at realtime sync? Google. You know who offers an API to expose their realtime sync capabilities? Google. We’ve rewritten Collab Mode to take advantage of it where we can. Essentially: Collab Mode is now faster, smoother, and just kinda better. If you’ve used Collab Mode in the past, we think you’ll feel the difference.

To put a point on it, the amount of information going back and forth to participants is less now, thus faster. The algorithms to update the code in the browser are updated, thus smoother. Plus we’ve spent time with how scroll positioning works, so there is less possibility of jumpiness.

And that’s not all! Two brand new features

One, you can see the cursors of the people you’re collabing with. This gives you a good sense of where they are and what they are doing. They are all different colors so you can tell people apart.

Oh hey, by the way, students in Professor Mode see your cursor now too.

Two, you can use all the different editor layouts in Collab Mode now, instead of just the editors-on-top only.

These links in the lower right allow you to switch to the left or right editor layouts while in Collab Mode.

Wait, Google?

We do send data off to Google to make the new Collab Mode work. So you should know:

  • There is no personally identifying information in what we send at all. Just code.
  • There is no public way to see any of that code or data.
  • Everything is sent over HTTPS and is authenticated via OAuth between us and them.
  • We delete all data stored at Google as part of this API process every 24 hours.

Remember Collab Mode is only available on our PRO plans.