Using Nintendo Switch Joy-Con Controllers on the Web with the WebHID API

Thomas Steiner:

WebHID allows websites to access devices that use the human interface devices (HID) protocol via JavaScript. Here is a little Christmas present 🎄 to the community to celebrate the API approval: releasing Joy-Con WebHID, a WebHID “driver” for Nintendo Joy-Con controllers so you can use them in the browser. If you have Joy-Cons, be sure to check out the demo to get a feel for what is possible.

Installation per NPM:

npm install joy-con-webhid

Once a Joy-Con has been paired, you can listen to hidinput events:

joyCon.addEventListener('hidinput', ({ detail }) => {
    // Careful, this fires at ~60fps.
    console.log(`Input report from ${joyCon.device.productName}:`, detail);
});

💡 The code does not use on the Gamepad API but the WebHID API as the former does not have support for orientation, a feature the Joy-Con controllers use extensively.

Releasing Joy-Con WebHID →
Joy-Con WebHID Repo (GitHub) →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.