Say Hello to Realtime Collaboration

by Rishabh


Realtime Collaboration

Yes! Finally, here's a proper HTML/CSS/JS playground on the internet that's powered with realtime collaboration (multiple people can write code from multiple places/devices and interact). Let me point out the cool features quickly:

Realtime Teaching

Realtime Teaching

Just create a new bin at labs and under the Share dropdown you will find the URL that you can share with your colleagues or friends over the internet, at workshops, IRC, forums, etc.

People can join in and then watch you write code in the HTML/CSS/JS code boxes!

All your code will render in realtime on their devices as well as your's. This model/type is more of a teacher-student one where a teacher/professor keeps on teaching (some html/css/js concepts or solves problems on related topics) and other students keep on grasping and learning.

Realtime Collaboration

Realtime Collaboration

By default Realtime Teaching is enabled. But you can check the checkbox in the Share dropdown to enable Realtime Collaboration.

As the name suggests, when you enable this mode, any person you invite can write code in the editors and all code gets rendered in realtime on all devices. It's similar to Google Docs or Etherpad if you are aware of them.


Chat and Collaborators

There's a neat chat box that you can use to chat with all the collaborators/students.


Without a DEMO, everything is useless. So here you go:

Few Notes


Whether you are in Realtime Teaching or Collaboration mode, if you actually want to save any state of the HTML/CSS/JS - then you have to click the "Update" button (or hit ctrl+s).

Basically, there's no auto-update, because I think it can be destructive in some cases. Although I am not sure and would love to hear your feedbacks whether the auto-update should be implemented or not.

Although, in the case of realtime collaboration (not teaching), the contents will get saved but that's only for the collaboration mode. This means if you remove '/collab' from the URL to view your actual item then the changes won't reflect (unless you have manually Updated the item).

Quick Access

In order to access the collaboration area, all you need to do is add '/collab' after '/labs' in the URL. :)

What Next ?

Well, go create some cool stuff and invite your friends for realtime collab.

Have feedback? Let @cssdeck know on Twitter