{"id":21587,"date":"2014-07-07T15:01:24","date_gmt":"2014-07-07T07:01:24","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21587"},"modified":"2025-04-04T02:00:08","modified_gmt":"2025-04-03T18:00:08","slug":"togetherjs-real-time-collaboration","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/","title":{"rendered":"Enhance Real-Time Collaboration on Your Website with TogetherJS"},"content":{"rendered":"

It can\u2019t be denied that real-time collaboration<\/a> 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<\/a> introduced their own tool called TogetherJS<\/strong>, an HTML5-based JavaScript library that facilitates real-time collaboration between users.<\/p>\n

TogetherJS<\/a> enables users to see each other\u2019s mouse\/cursor positions, scroll positions, and clicks<\/strong>. It synchronizes editing forms and controlling video playback. For communication, users can chat using text and audio.<\/p>\n

Behind TogetherJS<\/h2>\n

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

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

For audio chat features, WebRTC<\/a> is utilized. To learn more about the underlying technology, visit the technology overview<\/a> page.<\/p>\n

Usage<\/h2>\n

To demonstrate TogetherJS, I\u2019ll use its sample apps<\/a> on two different browsers (Chrome and Firefox) simultaneously. Let\u2019s get started!<\/p>\n

The first time you start TogetherJS, you\u2019ll be prompted by a guide wizard<\/strong> that assists with all available features. You can skip it anytime if you prefer.<\/p>\n

\"TogetherJS<\/figure>\n

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.<\/p>\n

\"Updating<\/figure>\n

On the right side, you\u2019ll see the TogetherJS panel<\/strong>. Here, you can update your profile, get the collaboration link, and chat using text or audio. To invite a friend, click \u201cAdd a friend,\u201d copy the link, and send it to your friend.<\/p>\n

\"Inviting<\/figure>\n

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.<\/p>\n

\"Joined<\/figure>\n

When your friends click or move their mouse, it will be shown on your page with a cursor animation labeled with their name.<\/p>\n

\"Cursor<\/figure>\n

If friends scroll their page, their cursor will face downwards (only in Chrome).<\/p>\n

\"Scrolling<\/figure>\n

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<\/a>.<\/p>\n

\"Text<\/figure>\n

Installation<\/h3>\n

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

\r\n<script src=\"https:\/\/togetherjs.com\/togetherjs-min.js\"><\/script>\r\n<\/pre>\n
You can also download the source<\/a> and host it on your server.<\/p>\n
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:<\/p>\n
\r\n<button onclick=\"TogetherJS(this); return false;\">Start TogetherJS<\/button>\r\n<\/pre>\n
For advanced setup and other configurations, visit the documentation page<\/a>.<\/p>\n
Conclusion<\/h2>\n
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<\/a> and Pixelreka<\/a> to see its potential.<\/p>","protected":false},"excerpt":{"rendered":"
It can\u2019t 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.…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nEnhance Real-Time Collaboration on Your Website with TogetherJS - Hongkiat<\/title>\n<meta name=\"description\" content=\"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,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhance Real-Time Collaboration on Your Website with TogetherJS\" \/>\n<meta property=\"og:description\" content=\"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,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-07T07:01:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:00:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/togetherjs-real-time-collaboration\/guide-wizard.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Enhance Real-Time Collaboration on Your Website with TogetherJS\",\"datePublished\":\"2014-07-07T07:01:24+00:00\",\"dateModified\":\"2025-04-03T18:00:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/\"},\"wordCount\":520,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/togetherjs-real-time-collaboration\\\/guide-wizard.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/\",\"name\":\"Enhance Real-Time Collaboration on Your Website with TogetherJS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/togetherjs-real-time-collaboration\\\/guide-wizard.jpg\",\"datePublished\":\"2014-07-07T07:01:24+00:00\",\"dateModified\":\"2025-04-03T18:00:08+00:00\",\"description\":\"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,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/togetherjs-real-time-collaboration\\\/guide-wizard.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/togetherjs-real-time-collaboration\\\/guide-wizard.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/togetherjs-real-time-collaboration\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhance Real-Time Collaboration on Your Website with TogetherJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Enhance Real-Time Collaboration on Your Website with TogetherJS - Hongkiat","description":"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,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/","og_locale":"en_US","og_type":"article","og_title":"Enhance Real-Time Collaboration on Your Website with TogetherJS","og_description":"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,","og_url":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-07-07T07:01:24+00:00","article_modified_time":"2025-04-03T18:00:08+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/togetherjs-real-time-collaboration\/guide-wizard.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Enhance Real-Time Collaboration on Your Website with TogetherJS","datePublished":"2014-07-07T07:01:24+00:00","dateModified":"2025-04-03T18:00:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/"},"wordCount":520,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/togetherjs-real-time-collaboration\/guide-wizard.jpg","keywords":["Javascripts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/","url":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/","name":"Enhance Real-Time Collaboration on Your Website with TogetherJS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/togetherjs-real-time-collaboration\/guide-wizard.jpg","datePublished":"2014-07-07T07:01:24+00:00","dateModified":"2025-04-03T18:00:08+00:00","description":"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,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/togetherjs-real-time-collaboration\/guide-wizard.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/togetherjs-real-time-collaboration\/guide-wizard.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/togetherjs-real-time-collaboration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Enhance Real-Time Collaboration on Your Website with TogetherJS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Cb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=21587"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21587\/revisions"}],"predecessor-version":[{"id":73705,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21587\/revisions\/73705"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21587"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}