Using TogetherJS

By  on  

TogetherJS

Last week I highlighted five awesome Mozilla technologies that most people have never heard of.  Before the Mozilla Summit in Santa Clara, even I (a Mozilla employee)  had not heard of a few of them.  One of the projects I was most impressed by was TogetherJS, a project created to allow for simple collaborative development between any number of users.  My favorite attribute of TogetherJS is that it's so incredibly easy to implement.  Let me show you how!

The HTML

Implementing TogetherJS only requires a script tag and an opt-in button to initiate collaboration:

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

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

The TogetherJS(this) call initiates the library, displaying an opt-in dialog, and then users can see where other users place their cursor, click, change form fields, and modify page contents. The updates can be anonymous (yay privacy!) and effective!

What an incredible utility -- never has instant collaboration been so easy!  TogetherJS is a another example of how Mozilla is fighting to make not just development easier, but collaboration of all kinds easier.  The epic development sandbox, JSFiddle, has implemented TogetherJS to allow for easily collaboration and code experimentation.  Leave it to Mozilla to create an epic collaboration tool that's easy to implement!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

Discussion

  1. Does Jsfiddle activate it by keyboard shortcut as well as by link? Numerous times its rather annoyingly popped up while I’ve been speed typing or quickly hitting crtl shortcuts. On an old dog of a machines like mine its actual pretty laggy.

  2. Nils

    that’s just like towtruck, is it?

  3. Good
    this was a good post! Handbag Coach Online http://kpmpacks.in/handbag-coach-online.html

  4. Hi David,

    You might be interested in trying out surfly.com: it is similar to togetherjs but requires no modifications to the website and works with signed in sessions.

  5. zip

    To Denis.

    But your version doesn’t take parallel interaction, only view!

  6. Rahul

    can we implement drag and drop functionality in togetherjs application

  7. Jack

    Hi David,
    This example does not seem to work. Is the Mozilla TogetherJS still active?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!