{"id":27232077,"url":"https://github.com/jcubic/sysend","last_synced_at":"2026-01-15T22:19:52.530Z","repository":{"id":17847616,"uuid":"20765046","full_name":"jcubic/sysend","owner":"jcubic","description":"Web application synchronization between different tabs","archived":false,"fork":false,"pushed_at":"2025-11-22T17:55:28.000Z","size":12817,"stargazers_count":1151,"open_issues_count":4,"forks_count":74,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-12-26T21:59:01.380Z","etag":null,"topics":["browser","callback","communication","cross-tab","events","javascript","messages","notifications","proxy","pubsub","rpc","synchronization","tabs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcubic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jcubic","ko_fi":"jcubic","custom":"https://www.paypal.me/jcubic"}},"created_at":"2014-06-12T11:27:32.000Z","updated_at":"2025-12-06T15:17:29.000Z","dependencies_parsed_at":"2024-01-15T13:00:06.184Z","dependency_job_id":"1921cafc-0d0b-4396-ba6b-80af35872209","html_url":"https://github.com/jcubic/sysend","commit_stats":{"total_commits":160,"total_committers":4,"mean_commits":40.0,"dds":"0.018750000000000044","last_synced_commit":"678e483d35b17987f9d46c42e620184a5224a8e4"},"previous_names":["jcubic/sysend"],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/jcubic/sysend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fsysend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fsysend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fsysend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fsysend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcubic","download_url":"https://codeload.github.com/jcubic/sysend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Fsysend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28472626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-15T22:13:38.078Z","status":"ssl_error","status_checked_at":"2026-01-15T22:12:11.737Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","callback","communication","cross-tab","events","javascript","messages","notifications","proxy","pubsub","rpc","synchronization","tabs"],"created_at":"2025-04-10T13:56:34.491Z","updated_at":"2026-01-15T22:19:52.514Z","avatar_url":"https://github.com/jcubic.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/jcubic/sysend.js/blob/master/assets/logo.svg?raw=true\" alt=\"Sysend.js logo\"/\u003e\n\u003c/p\u003e\n\n[![npm](https://img.shields.io/badge/npm-1.17.5-blue.svg)](https://www.npmjs.com/package/sysend)\n![bower](https://img.shields.io/badge/bower-1.17.5-yellow.svg)\n![downloads](https://img.shields.io/npm/dt/sysend.svg)\n[![jsdelivr](https://img.shields.io/jsdelivr/npm/hm/sysend)](https://www.jsdelivr.com/package/npm/sysend)\n\n# [Web application synchronization between different tabs](https://github.com/jcubic/sysend.js/)\n\nsysend.js is a small library that allows to send messages between pages that are open in the same\nbrowser. It also supports Cross-Domain communication (Cross-Origin). The library doesn't have any\ndependencies and uses the HTML5 LocalStorage API or BroadcastChannel API.  If your browser don't\nsupport BroadcastChannel (see [Can I Use](https://caniuse.com/#feat=broadcastchannel)) then you can\nsend any object that can be serialized to JSON. With BroadcastChannel you can send any object (it\nwill not be serialized to string but the values are limited to the ones that can be copied by the\n[structured cloning algorithm](https://html.spec.whatwg.org/multipage/structured-data.html#structured-clone)).\nYou can also send empty notifications.\n\nTested on:\n\nGNU/Linux: in Chromium 34, Firefox 29, Opera 12.16 (64bit)\u003cbr/\u003e\nWindows 10 64bit: in IE11 and Edge 38, Chrome 56, Firefox 51\u003cbr/\u003e\nMacOS X El Captain: Safari 9, Chrome 56, Firefox 51\n\n## Note about Safari 7+ and Cross-Domain communication\n\nAll cross-domain communication is disabled by default with Safari 7+.  Because of a feature that\nblocks 3rd party tracking for iframe, and any iframe used for cross-domain communication runs in\na sandboxed environment.  That's why this library like any other solution for cross-domain\ncommunication, don't work on Safari.\n\n## Note about Chrome 115+ and different domains\n\nSince version 115 Google Chrome introduced Third-party storage partitioning. Because of this feature,\nCross-domain communication only works on subdomains. There will probably be a way to share the context\nusing some kind of permission API, that in the future may also land in Safari (hopefully). More information\nabout this can be found in [#54](https://github.com/jcubic/sysend.js/issues/54).\nInformation about the API can also be found in Google Chrome documentation:\n[Storage Partitioning](https://developer.chrome.com/docs/privacy-sandbox/storage-partitioning/)\n\nThere is a new API: Storage Access API. It's available when you\n[register](https://developer.chrome.com/origintrials/#/trials/active) for the\n[Origin Trial](https://developer.chrome.com/origintrials/#/view_trial/577023702256844801).\n\nYou can register two and more domains, you will have a token that you need to add to the HTML files (in the head tag):\n\n```html\n\u003cmeta http-equiv=\"origin-trial\" content=\"\u003cTOKEN\u003e\" /\u003e\n```\n\nYou can also use the HTTP header:\n\n```\nOrigin-Trial: \u003cTOKEN\u003e\n```\n\nRight now, the API only works with localStorage fallback (when inside iframes).\n\n## Installation\n\nInclude `sysend.js` file in your html, you can grab the file from npm:\n\n```\nnpm install sysend\n```\n\nor bower\n\n\n```\nbower install sysend\n```\n\nyou can also get it from unpkg.com CDN:\n\n```\nhttps://unpkg.com/sysend\n```\n\nor jsDelivr:\n\n```\nhttps://cdn.jsdelivr.net/npm/sysend\n```\n\njsDelivr will minify the file. From my testing it's faster than unpkg.com.\n\n## Usage\n\n```javascript\nwindow.onload = function() {\n    sysend.on('foo', function(data) {\n        console.log(data.message);\n    });\n    var input = document.getElementsByTagName('input')[0];\n    document.getElementsByTagName('button')[0].onclick = function() {\n        sysend.broadcast('foo', { message: input.value });\n    };\n};\n```\n\n### Windows/tabs tracking\n\nTracking is high level API build on top of `on()` and `broadcast()`, that allows to manage windows/tabs. You can sent message directly to other windows/tabs:\n\n```javascript\nsysend.track('message', ({data, origin}) =\u003e {\n    console.log(`${origin} send message \"${data}\"`);\n});\nsysend.post('\u003cID\u003e', 'Hello other window/tab');\n```\n\nand listen to events like:\n\n```javascript\nsysend.track('open', (data) =\u003e {\n    console.log(`${data.id} window/tab just opened`);\n});\n```\n\nOther tracking events includes: close/primary/secondary executed when window/tab is closed or become primary or secondary. Track method was added in version 1.6.0. Another required event is `ready` (added in 1.10.0) that should be used when you want to get list of windows/tabs:\n\n```javascript\nsysend.track('ready', () =\u003e {\n    sysend.list().then(tabs =\u003e {\n        console.log(tabs);\n    });\n});\n```\n\nwith `list()` method and `open`/`close` events you can implement dynamic list of windows/tab. That will change when new window/tab is open or close.\n\n```javascript\nlet list = [];\n\nsysend.track('open', data =\u003e {\n    if (data.id !== sysend.id) {\n        list.push(data);\n        populate_list(list);\n    }\n});\n\nsysend.track('close', data =\u003e {\n    list = list.filter(tab =\u003e data.id !== tab.id);\n    populate_list(list);\n});\n\nsysend.track('ready', () =\u003e {\n    sysend.list().then(tabs =\u003e {\n        list = tabs;\n        populate_list(list);\n    });\n});\n\nfunction populate_list() {\n    select.innerHTML = '';\n    list.forEach(tab =\u003e {\n        const option = document.createElement('option');\n        option.value = tab.id;\n        option.innerText = tab.id;\n        select.appendChild(option);\n    });\n}\n```\n\nIn version 1.16.0 this code was abstracted into:\n\n```javascript\nsysend.track('update', (list) =\u003e {\n   populate_list(list);\n});\n```\n\nThis can be simplified with point free style:\n\n```javascript\nsysend.track('update', populate_list);\n```\n\n### RPC mechanism\n\nIn version 1.15.0 new API was added called `rpc()` (build on top of tracking mechanism) that allow to use RPC (Remote Procedure Call) between open windows/tabs.\n\n```javascript\nconst rpc = sysend.rpc({\n    get_message() {\n        return document.querySelector('input').value;\n    }\n});\n\nbutton.addEventListener('click', () =\u003e {\n    rpc.get_message('\u003cID\u003e').then(message =\u003e {\n        console.log(`Message from other tab is \"${message}\"`);\n    }).catch(e =\u003e {\n        console.log(`get_message (ERROR) ${e.message}`);\n    });\n});\n```\n\n### Cross-Domain communication\n\nIf you want to add support for Cross-Domain communication, you need to call proxy method with url on target domain\nthat have [proxy.html file](https://github.com/jcubic/sysend.js/blob/master/proxy.html).\n\n```javascript\nsysend.proxy('https://jcubic.pl');\nsysend.proxy('https://terminal.jcubic.pl');\n```\n\non Firefox you need to add **CORS** for the proxy.html that will be loaded into iframe (see [Cross-Domain LocalStorage](https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/)).\n\n### Serialization\n\nif you want to send custom data you can use serializer (new in 1.4.0) this API\nwas created for localStorage that needs serialization.\n\nExample serializer can be [json-dry](https://github.com/11ways/json-dry):\n\n```javascript\nsysend.serializer(function(data) {\n    return Dry.stringify(data);\n}, function(string) {\n    return Dry.parse(string);\n});\n````\n\nor [JSON5](https://json5.org/):\n\n```javascript\nsysend.serializer(function(data) {\n    return JSON5.stringify(string);\n}, function(string) {\n    return JSON5.parse(string);\n});\n````\n\n### Security protection\n\nSince version 1.10.0 as a security mesure Cross-Domain communication has been limited to only those domains that are allowed.\nTo allow domain to listen to sysend communication you need to specify channel inside iframe. You need add your origins to the\n`sysend.channel()` function (origin is combination of protocol domain and optional port).\n\n\n## Demos\n\n* [Simple demo using iframes](https://jcubic.pl/sysend-demo/).\n* [All feature demo](http://jcubic.pl/sysend.php) (this one require open in two tabs/windows, there is also link to other domain).\n* [ReactJS shopping cart synchronization](https://codepen.io/jcubic/pen/QWgmBmE).\n* [multiple window tracking demo](https://jcubic.pl/windows.html). Open the link in multiple windows (not tabs). First window will track position and size for all windows.\n* [Multiple windows with interactive Canvas demo](https://codepen.io/jcubic/pen/ZEjXBVg), this demo draws circle on the Canvas that follow the mouse. Open the page in multiple windows (not tabs). The best effect is when the circle is between two windows.\n\n![Screen capture of Operating System Windows dragging and moving around animation](https://github.com/jcubic/sysend.js/blob/master/assets/windows-demo.gif?raw=true)\n\n![Screen capture of multiple browser windows and interactive circle that follow the mouse](https://github.com/jcubic/sysend.js/blob/master/assets/canvas-demo.gif?raw=true)\n\n## API\n\nsysend object:\n\n| function | description | arguments | Version |\n|---|---|---|---|\n| `on(name, callback)` | add event handler for specified name | name - `string` - The name of the event\u003cbr\u003ecallback - function `(object, name) =\u003e void` | 1.0.0 |\n| `off(name [, callback])` | remove event handler for given name, if callback is not specified it will remove all callbacks for given name | name - `string` - The name of the event\u003cbr\u003ecallback - optional function `(object, name) =\u003e void` | 1.0.0 |\n| `broadcast(name [, object])` | send any object and fire all events with specified name (in different pages that register callback using on). You can also just send notification without an object | name - string - The name of the event\u003cbr\u003eobject - optional any data | 1.0.0 |\n| `proxy(\u003curls\u003e)` | create iframe proxy for different domain, the target domain/URL should have [proxy.html](https://github.com/jcubic/sysend.js/blob/master/proxy.html)\u003cbr\u003e file. If url domain is the same as page domain, it's ignored. So you can put both proxy calls on both | url - string | 1.3.0 |\n| `serializer(to_string, from_string)` | add serializer and deserializer functions | both arguments are functions (data: any) =\u003e string | 1.4.0 |\n| `emit(name, [, object])` | same as `broadcast()` but also invoke the even on same page | name - string - The name of the event\u003cbr\u003eobject - optional any data | 1.5.0 |\n| `post(\u003cwindow_id\u003e, [, object])` | send any data to other window | window_id - string of the target window (use `'primary'` to send to primary window)\u003cbr\u003eobject - any data | 1.6.0 / `'primary'` target 1.14.0 |\n| `list()` | returns a Promise of objects `{id:\u003cUUID\u003e, primary}` for other windows, you can use those to send a message with `post()` | NA | 1.6.0 |\n| `track(event, callback)` | track inter window communication events  | event - any of the strings: `\"open\"`, `\"close\"`, `\"primary\"`, \u003cbr\u003e`\"secondary\"`, `\"message\"`, `\"update\"`\u003cbr\u003ecallback - different function depend on the event:\u003cbr\u003e* `\"message\"` - `{data, origin}` - where data is anything the `post()` sends, and origin is `id` of the sender.\u003cbr\u003e* `\"open\"` - `{count, primary, id}` when new window/tab is opened\u003cbr\u003e* `\"close\"` - `{count, primary, id, self}` when window/tab is closed\u003cbr\u003e* `\"primary\"` and `\"secondary\"` function has no arguments and is called when window/tab become secondary or primary.\u003cbr\u003e* `\"ready\"` - event when tracking is ready. | 1.6.0 except `ready` - 1.10.0 and `update` - 1.16.0 |\n| `untrack(event [,callback])` | remove single event listener all listeners for a given event | event - any of the strings `'open'`, `'close'`, `'primary'`, `'secondary'`, `'message'`, or `'update'`. | 1.6.0 |\n| `isPrimary()` | function returns true if window is primary (first open or last that remain) | NA  | 1.6.0 |\n| `channel()` | function restrict cross domain communication to only allowed domains. You need to call this function on proxy iframe to limit number of domains (origins) that can listen and send events.  | any number of origins (e.g. 'http://localhost:8080' or 'https://jcubic.github.io') you can also use valid URL. | 1.10.0 |\n| `useLocalStorage([toggle])` | Function set or toggle localStorage mode. | argument is optional and can be `true` or `false`. | 1.14.0 |\n| `rpc(object): Promise\u003cfn(id, ...args): Promise\u003e` | Function create RPC async functions which accept first additional argument that is ID of window/tab that it should sent request to. The other window/tab call the function and return value resolve original promise. | The function accept an object with methods and return a Promise that resolve to object with same methods but async. | 1.15.0 |\n\nTo see details of using the API, see [demo.html source code](https://github.com/jcubic/sysend.js/blob/master/demo.html) or [TypeScript definition file](https://github.com/jcubic/sysend.js/blob/master/sysend.d.ts).\n\n## Story\n\nThe story of this library came from my question on StackOverflow from 2014: [Sending notifications between instances of the page in the same browser](https://stackoverflow.com/q/24182409/387194), with hint from user called **Niet the Dark Absol**, I was able to create a PoC of the solution using localStorage. I quickly created a library from my solution. I've also explained how to have [Cross-Domain LocalStorage](https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/). The blog post have steady number of visitors (actually it's most viewed post on that blog).\n\nAnd the name of the library is just random word \"sy\" and \"send\" suffix. But it can be an backronym for **Synchronizing Send** as in synchronizing application between browser tabs.\n\n## Articles\n* [CSRF Protection Problem and How to Fix it](https://www.freecodecamp.org/news/csrf-protection-problem-and-how-to-fix-it/)\n* [Synchronizacja stanu aplikacji www między zakładkami](https://bulldogjob.pl/news/1804-synchronizacja-stanu-aplikacji-www-miedzy-zakladkami)\n\n## Press\nThe library was featured in:\n* [Web Tools Weekly](https://webtoolsweekly.com/archives/issue-378/)\n* [JavaScript Weekly](https://javascriptweekly.com/issues/581)\n* [Impressive Webs](https://www.impressivewebs.com/most-interesting-front-end-developer-tools-2021/)\n* [Front-end Architecture](https://frontend-architecture.com/2022/03/30/messaging-between-browser-tabs/)\n* [Frontend Planet](https://www.frontendplanet.com/news-for-front-end-developers-13/)\n\n## License\n\nCopyright (C) 2014 [Jakub T. Jankiewicz](https://jcubic.pl/me)\u003cbr/\u003e\nReleased under the [MIT license](https://opensource.org/licenses/MIT)\n\nThis is free software; you are free to change and redistribute it.\u003cbr/\u003e\nThere is NO WARRANTY, to the extent permitted by law.\n","funding_links":["https://github.com/sponsors/jcubic","https://ko-fi.com/jcubic","https://www.paypal.me/jcubic"],"categories":["javascript","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcubic%2Fsysend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcubic%2Fsysend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcubic%2Fsysend/lists"}