Enhance Real-Time Collaboration on Your Website with TogetherJS

It can’t be denied that real-time collaboration has become an essential part of the modern web. Google Drive is a great example of how simultaneous, real-time collaboration is crucial for online work today. Applying the same concept, Mozilla Labs introduced their own tool called TogetherJS, an HTML5-based JavaScript library that facilitates real-time collaboration between users.

TogetherJS enables users to see each other’s mouse/cursor positions, scroll positions, and clicks. It synchronizes editing forms and controlling video playback. For communication, users can chat using text and audio.

Behind TogetherJS

Initially, TogetherJS started as a real-time collaboration service called TowTruck. Released by Mozilla Labs in April 2013, the product evolved beyond its original concept, prompting a name change.

TogetherJS relies on WebSockets technology for interactive communication between user browsers. A hub server echoes received messages to all participants, allowing them to see each other’s cursors, scroll positions, and clicks. The default hub server is hosted by Mozilla, but you can also host your own.

For audio chat features, WebRTC is utilized. To learn more about the underlying technology, visit the technology overview page.

Usage

To demonstrate TogetherJS, I’ll use its sample apps on two different browsers (Chrome and Firefox) simultaneously. Let’s get started!

The first time you start TogetherJS, you’ll be prompted by a guide wizard that assists with all available features. You can skip it anytime if you prefer.

In the guide wizard, you can set up your name, upload an avatar, and change your profile color. This is optional and can be done later in the TogetherJS panel.

On the right side, you’ll see the TogetherJS panel. Here, you can update your profile, get the collaboration link, and chat using text or audio. To invite a friend, click “Add a friend,” copy the link, and send it to your friend.

Friends who join will have their avatars appear at the bottom of the panel. Any actions like typing, clicking, moving, or scrolling will be synced to your view.

When your friends click or move their mouse, it will be shown on your page with a cursor animation labeled with their name.

If friends scroll their page, their cursor will face downwards (only in Chrome).

To communicate with your friends, you can use text or audio chat features. Note that the audio chat feature is still in its experimental phase.

Installation

To install TogetherJS, add the following code snippet before the closing </body> tag:

<script src="https://togetherjs.com/togetherjs-min.js"></script>

You can also download the source and host it on your server.

Now you have TogetherJS on your site, and it will be active after the browser reloads the page. This feature only works after users click the button. Add the code below wherever you want:

<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

For advanced setup and other configurations, visit the documentation page.

Conclusion

TogetherJS is beneficial for those who need collaborative features on their web pages or projects, ensuring online collaborators stay on the same page. The fact that TogetherJS works on any site and across multiple browsers is a powerful feature. Check out examples of its implementation on JSFiddle and Pixelreka to see its potential.