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
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

  • By
    Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

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!