What is TogetherJS?

TogetherJS is an open-source JavaScript library you paste into your own website so that two or more visitors can work on the same page at the same time: they see each other's cursors and clicks, chat over text or WebRTC audio, follow one another across pages of the same domain and watch form fields and page content change live. Sessions are created by sharing a unique TogetherJS URL, and rooms can be assigned per site section with an occupancy limit. Mozilla built it, and the project now lives in the jsfiddle GitHub organisation under the Mozilla Public License 2.0. As a site owner you configure behaviour through TogetherJSConfig_* variables (tool name, hub address, click cloning, auto-start, YouTube sync, language, hooks), and you can wire your own application state through its broadcast message channel. The officially hosted hub no longer exists, so you run the relay yourself: the recommended route is the hub-worker/ Cloudflare Workers + Durable Objects port (free plan, deployed with wrangler), while the legacy Node.js hub/server.js stays in the repo for anyone who prefers a container. Limits: sessions are bound to one origin, it targets recent Firefox and Chrome (little testing on Internet Explorer or mobile browsers), and there are no tagged releases or published container images.

Should you self-host TogetherJS?

TogetherJS scores 57/100 on selfhost.directory (how scoring works) and ranks #10 of 30 in Collaboration. It has 6 997 GitHub stars.

There was no stable release in the past 12 months, so check the repository's recent activity before you rely on it.

Setup is moderate: expect some configuration beyond a single command. It is MPL-2.0-licensed and written mostly in JavaScript.

Its closest alternative on selfhost.directory is penpot (84/100, 61 785 stars). It scores higher overall, so compare the two before you pick. See TogetherJS vs penpot side by side.

Features

Application hooks and custom messages
Audio chat (WebRTC)Needs recent browsers; TogetherJSConfig_disableWebRTC removes the button.
Host-supplied user identity
Keyboard shortcut activation
Localised interface
Real-time co-browsing
Real-time content sync
Room assignment
Self-hosted relay hubCloudflare Workers port (hub-worker/) recommended; legacy Node hub/server.js also kept.
Shareable session links
Shared cursors and clicks
Text Chat
User presence
YouTube video synchronisation

How to configure TogetherJS

HUB_URLEnvironment variable set when building so a local build points at your own hub server.
Environment variable set when building so a local build points at your own hub server.
values: hub URL, e.g. http://localhost:8080
TogetherJSConfig_autoStartStart TogetherJS automatically when the page loads; must be set before TogetherJS loads.
Start TogetherJS automatically when the page loads; must be set before TogetherJS loads.
values: true | false
TogetherJSConfig_callToStartFunction that defers TogetherJS initialisation until your app calls the given callback.
Function that defers TogetherJS initialisation until your app calls the given callback.
values: function (callback)
TogetherJSConfig_cloneClicksRepeat clicks on matching elements in every other participant's browser.
Repeat clicks on matching elements in every other participant's browser.
values: jQuery selector | true
TogetherJSConfig_disableWebRTCDisables/removes the button to do audio chat via WebRTC.
Disables/removes the button to do audio chat via WebRTC.
values: true | false
TogetherJSConfig_dontShowClicksDisable the visual click display for elements matching a jQuery selector.
Disable the visual click display for elements matching a jQuery selector.
values: jQuery selector | true
TogetherJSConfig_enableShortcutStart TogetherJS with the alt-T alt-T shortcut instead of a button.
Start TogetherJS with the alt-T alt-T shortcut instead of a button.
values: true | false
TogetherJSConfig_findRoomAssign people to a room, or to a series of rooms with maximum occupancy.
Assign people to a room, or to a series of rooms with maximum occupancy.
values: "prefix" | {prefix: string, max: number}
TogetherJSConfig_getUserAvatarFunction returning a URL to the user's avatar, expected to be 40px square.
Function returning a URL to the user's avatar, expected to be 40px square.
values: function
TogetherJSConfig_getUserColorFunction returning the CSS colour that represents the user.
Function returning the CSS colour that represents the user.
values: function
TogetherJSConfig_getUserNameFunction your app supplies to return the user's name or nick (null if unknown).
Function your app supplies to return the user's name or nick (null if unknown).
values: function
TogetherJSConfig_hubBaseBase URL of the hub server that echoes messages between clients; override it to use your own hub.
Base URL of the hub server that echoes messages between clients; override it to use your own hub.
values: https/wss hub URL
TogetherJSConfig_ignoreForms:passwordjQuery selectors for forms whose values are not synced; true ignores all forms.
jQuery selectors for forms whose values are not synced; true ignores all forms.
values: list of jQuery selectors | true
TogetherJSConfig_ignoreMessagescursor-update, keydown, scroll-updateMessage types left out of console logging; true ignores all messages.
Message types left out of console logging; true ignores all messages.
values: list | true
TogetherJSConfig_includeHashInUrlfalseTreat the whole URL including the hash as the page identifier, for single-page apps.
Treat the whole URL including the hash as the page identifier, for single-page apps.
values: true | false
TogetherJSConfig_inviteFromRoomAllow inviting people hanging out in another TogetherJS room from the profile menu.
Allow inviting people hanging out in another TogetherJS room from the profile menu.
values: true | false
TogetherJSConfig_langInterface language, named with BCP 47 hyphenated codes such as "pt-BR".
Interface language, named with BCP 47 hyphenated codes such as "pt-BR".
values: locale code
TogetherJSConfig_siteNameName of your site, used in some help text; defaults to the title of the page.
Name of your site, used in some help text; defaults to the title of the page.
values: string
TogetherJSConfig_suppressInviteDon't automatically pop open the invite-link window when a session starts.
Don't automatically pop open the invite-link window when a session starts.
values: true | false
TogetherJSConfig_suppressJoinConfirmationSkip asking invited users whether they want to join the browsing session.
Skip asking invited users whether they want to join the browsing session.
values: true | false
TogetherJSConfig_toolNameName given to the tool; if set, the words TogetherJS won't appear in the UI.
Name given to the tool; if set, the words TogetherJS won't appear in the UI.
values: string
TogetherJSConfig_useMinimizedCodeDynamically override whether the minimized/combined code is used.
Dynamically override whether the minimized/combined code is used.
values: true | false
TogetherJSConfig_youtubeSynchronise embedded YouTube videos for everyone and load the YouTube iframe API.
Synchronise embedded YouTube videos for everyone and load the YouTube iframe API.
values: true | false