jsfiddle/togetherjs

★ 7,007JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((TogetherJS))
    What it does
      Shared cursors
      Form sync
      Sync browsing
    How it works
      Script tag install
      Hub server relay
      Session links
    Tech Stack
      JavaScript
      Node.js
      Grunt
    Audience
      Web developers
      Site owners

mindmap root((TogetherJS)) What it does Shared cursors Form sync Sync browsing How it works Script tag install Hub server relay Session links Tech Stack JavaScript Node.js Grunt Audience Web developers Site owners

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add collaborative cursor-sharing and form sync to your existing web app without rewriting any backend code.

USE CASE 2

Build a shared browsing session for customer support so agents can navigate alongside users in real time.

USE CASE 3

Integrate co-editing into an online form or quiz tool so two people can fill it out together.

USE CASE 4

Create a synchronized product demo where a presenter and viewer browse the same page in sync.

Tech stack

JavaScriptNode.jsGruntLESS

Getting it running

Difficulty · easy Time to first run · 5min

You can use and modify the code freely, but any changes to the TogetherJS files themselves must be shared under the same Mozilla Public License 2.0.

In plain English

TogetherJS is a JavaScript library that adds real-time collaboration to any existing website. When two people visit the same page with TogetherJS active, they can see each other's mouse cursors moving around, watch each other make edits to form fields or other inputs, and browse the site in sync. It was originally built by Mozilla and is now maintained under the jsfiddle GitHub account. The way it works is that a website owner adds a small script tag to their pages. When a visitor activates TogetherJS, a session starts and a shareable link is generated. The person who receives that link joins the same session, and from that point both users are connected through a central hub server that relays messages between them. The hub server itself is lightweight and does not process the content of the messages, it just passes them through. Mozilla ran a public hub server at hub.togetherjs.com, and the README notes there is little reason to run your own unless you are making changes to the server code. For websites served over HTTPS, the hub must also be HTTPS. Adding the library to a site requires including one JavaScript file. The rest of the collaboration behavior is handled client-side by the library, which synchronizes cursor positions, form inputs, and page navigation between connected users. Website owners can customize some aspects of how TogetherJS behaves on their site. For developers who want to build from source or contribute, the project uses Node.js, npm, and Grunt as a build system. Styles are written in LESS and need to be compiled. The repository includes a development server and a watch task that rebuilds files automatically as you make changes. Tests exist but have no automated runner and must be opened manually in a browser. The project is licensed under the Mozilla Public License 2.0.

Copy-paste prompts

Prompt 1

Add TogetherJS to my website so two users can see each other's cursors and edit forms together, show me the minimal script tag setup and how to trigger a session.

Prompt 2

I want customer support agents to browse alongside users on my site using TogetherJS. How do I integrate it and generate shareable session links?

Prompt 3

How do I run my own TogetherJS hub server instead of the public one? Walk me through the Node.js setup.

Prompt 4

Customize TogetherJS to disable cursor sharing but keep form synchronization, what config options do I use?

Open on GitHub → Explain another repo

← jsfiddle on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.