navigator.hid is a read-only property that returns an HID object — the entry point for the WebHID API (MDN). Use it to request HID devices and listen for connect/disconnect events.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.hid. Start with this line.
navigator.hid| Call | What it does |
|---|---|
navigator.hid | Primary signature. |
Built into the browser. Read navigator.hid on Navigator — no import required.
navigator.hid| Parameter | Description |
|---|---|
| getDevices() | Optional. List previously granted devices |
| Filters | Optional. Narrow picker by vendor/product/usage |
| Return Value | Description |
|---|---|
| * | HID object |
Check whether WebHID is available before calling it.
const supported = "hid" in navigator;
console.log(supported ? "WebHID available" : "WebHID missing");in. "hid" in navigator checks for the property.getDevices()List HID devices this origin already has permission to use.
async function listKnown() {
if (!("hid" in navigator)) {
console.log("unsupported");
return;
}
const devices = await navigator.hid.getDevices();
console.log("known: " + devices.length);
devices.forEach((d) => console.log("HID: " + d.productName));
}
listKnown();getDevices(). Returns previously granted devices (MDN).0 until the user picks a device once.requestDevice for first-time access.requestDevice()Open the device picker from a button click (transient user activation).
async function connectHid() {
if (!("hid" in navigator)) {
console.log("unsupported");
return;
}
try {
const devices = await navigator.hid.requestDevice({ filters: [] });
if (!devices.length) {
console.log("No device was selected.");
return;
}
console.log("HID: " + devices[0].productName);
} catch (err) {
console.log("An error occurred.");
}
}
document.querySelector("#connect").addEventListener("click", connectHid);requestDevice. Empty filters shows connected devices.devices[0].Navigator.hid (WebHID) is Experimental and Limited availability (not Baseline) on MDN. It requires a secure context. Permissions Policy may hide the property.
Support is strongest in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari typically omit WebHID. Always feature-detect.
Bottom line: Detect over HTTPS, request devices from a click, reuse getDevices() later, and keep a non-HID fallback.
Learn the navigator.ink entry for stylus and ink presentation.
11 people found this page helpful