{"id":13522400,"url":"https://github.com/tomayac/joy-con-webhid","last_synced_at":"2025-04-09T14:06:30.115Z","repository":{"id":53733234,"uuid":"310552317","full_name":"tomayac/joy-con-webhid","owner":"tomayac","description":"Use the Nintendo Switch Joy-Cons via the WebHID API","archived":false,"fork":false,"pushed_at":"2023-08-23T08:25:41.000Z","size":208,"stargazers_count":150,"open_issues_count":6,"forks_count":22,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-02T13:06:19.083Z","etag":null,"topics":["hid","joy-con","joy-cons","joycon","joycons","webhid"],"latest_commit_sha":null,"homepage":"https://tomayac.github.io/joy-con-webhid/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomayac.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},"funding":{"github":["tomayac"]}},"created_at":"2020-11-06T09:33:42.000Z","updated_at":"2025-03-26T16:01:27.000Z","dependencies_parsed_at":"2024-01-13T22:55:31.848Z","dependency_job_id":"8ca1dcad-e344-4dfe-9389-68d1c4bd51f8","html_url":"https://github.com/tomayac/joy-con-webhid","commit_stats":{"total_commits":59,"total_committers":5,"mean_commits":11.8,"dds":0.5423728813559322,"last_synced_commit":"b00b87ba01a7472fec527d58b8a5d806578096fc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomayac%2Fjoy-con-webhid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomayac%2Fjoy-con-webhid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomayac%2Fjoy-con-webhid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomayac%2Fjoy-con-webhid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomayac","download_url":"https://codeload.github.com/tomayac/joy-con-webhid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054227,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hid","joy-con","joy-cons","joycon","joycons","webhid"],"created_at":"2024-08-01T06:00:46.755Z","updated_at":"2025-04-09T14:06:30.093Z","avatar_url":"https://github.com/tomayac.png","language":"JavaScript","funding_links":["https://github.com/sponsors/tomayac"],"categories":["Libraries"],"sub_categories":["Candidates"],"readme":"# Joy-Con WebHID\n\nA [WebHID](https://web.dev/hid) driver for\n[Nintendo Joy-Cons](https://en.wikipedia.org/wiki/Joy-Con) with support for all buttons, analog\nsticks, and the device's gyroscope and accelerometer sensors.\n\n## Demo\n\nSee the [live demo](https://tomayac.github.io/joy-con-webhid/demo/) of the driver.\n\n\u003cimg width=\"800\" alt=\"Joy-Con WebHID demo showing two Joy-Cons slightly tilted with one of the analog sticks moved to the right on one Joy-Con and the 'A' button pressed on the other.\" src=\"https://user-images.githubusercontent.com/145676/101152193-01fc4f80-3623-11eb-8afd-50485f2807c6.png\"\u003e\n\nAnother demo is [Chrome Dino WebHID](https://github.com/tomayac/chrome-dino-webhid), where you\ncan play the Chrome dino game 🦖 over WebHID by jumping with a Joy-Con controller in your pocket.\n\n[![Joy-Con WebHID Chrome dino demo](https://img.youtube.com/vi/HuhQXXgDnCQ/0.jpg)](https://www.youtube.com/watch?v=HuhQXXgDnCQ)\n\nYet another demo courtesy of [@light2peter](https://github.com/light2peter) is the [Web MIDI demo](https://tomayac.github.io/joy-con-webhid/demo/webmidi.html), where the Joy-Cons are being used to make music on Web MIDI receivers.\n\n[![Joy-Con WebHID Web MIDI](https://img.youtube.com/vi/tMTnkjwSFNM/0.jpg)](https://youtu.be/tMTnkjwSFNM?t=42)\n\n## Installation\n\n```bash\nnpm install --save joy-con-webhid\n```\n\n(For **Linux**, see this [comment on Issue #3](https://github.com/tomayac/joy-con-webhid/issues/3#issuecomment-944427792)\nfor required pre-steps.)\n\n## Usage\n\nMake sure you have a pairing button on your page.\n\n```html\n\u003cbutton class=\"connect\" type=\"button\"\u003eConnect Joy-Con\u003c/button\u003e\n```\n\nImport the script and hook up the pairing button.\nThen create an interval that waits for Joy-Cons to appear,\nwhich can happen after pairing, on page load when previously paired Joy-Cons are reconnected,\nand when Joy-Cons wake up again after being idle.\n\n```js\nimport * as JoyCon from './node_modules/dist/index.js';\n\n// For the initial pairing of the Joy-Cons. They need to be paired one by one.\n// Once paired, Joy-Cons will be reconnected to on future page loads.\ndocument.querySelector('.connect').addEventListener('click', async () =\u003e {\n  // `JoyCon.connectJoyCon()` handles the initial HID pairing.\n  // It keeps track of connected Joy-Cons in the `JoyCon.connectedJoyCons` Map.\n  await JoyCon.connectJoyCon();\n});\n\n// Joy-Cons may sleep until touched and fall asleep again if idle, so attach\n// the listener dynamically, but only once.\nsetInterval(async () =\u003e {\n  for (const joyCon of JoyCon.connectedJoyCons.values()) {\n    if (joyCon.eventListenerAttached) {\n      continue;\n    }\n    // Open the device and enable standard full mode and inertial measurement\n    // unit mode, so the Joy-Con activates the gyroscope and accelerometers.\n    await joyCon.open();\n    await joyCon.enableStandardFullMode();\n    await joyCon.enableIMUMode();\n    await joyCon.enableVibration();\n    // Get information about the connected Joy-Con.\n    console.log(await joyCon.getDeviceInfo());\n    // Rumble.\n    await joyCon.rumble(600, 600, 0.5);\n    // Listen for HID input reports.\n    joyCon.addEventListener('hidinput', ({ detail }) =\u003e {\n      // Careful, this fires at ~60fps.\n      console.log(`Input report from ${joyCon.device.productName}:`, detail);\n    });\n    joyCon.eventListenerAttached = true;\n  }\n}, 2000);\n```\n\n## Why not use the Gamepad API?\n\nThe [Gamepad API](https://w3c.github.io/gamepad/)\nsupports Joy-Con controllers out-of-the-box,\nbut since the API (currently) does not have a concept of orientation,\nthe Joy-Cons' accelerometer and gyroscope data cannot be accessed.\nThe buttons and analog sticks are fully exposed, though.\nIf all you need is this, then by all means\n[go for the Gamepad API](https://web.dev/gamepad/).\n\n## Acknowledgements\n\nThis project takes heavy inspiration from [@wazho](https://github.com/wazho)'s\n[ns-joycon](https://github.com/wazho/ns-joycon),\nwhich in turn is based on [@dekuNukem](https://github.com/dekuNukem)'s\n[Nintendo_Switch_Reverse_Engineering](https://github.com/dekuNukem/Nintendo_Switch_Reverse_Engineering).\nThe rumble code was contributed by\n[@baku89](https://github.com/baku89).\nThe [HVC-Controller](https://twitter.com/taisukef/status/1572349705828569092) code was added by [@taisukef](https://github.com/taisukef).\nThe [Ring-Con](https://en.wikipedia.org/wiki/Ring_Fit_Adventure) code from [@mascii](https://github.com/mascii/demo-of-ring-con-with-web-hid).\n\n## License\n\nApache 2.0.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomayac%2Fjoy-con-webhid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomayac%2Fjoy-con-webhid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomayac%2Fjoy-con-webhid/lists"}