JavaScript Navigator hid Property

What You’ll Learn

navigator.hid is the entry point for the WebHID API. Learn the HID object, requestDevice / getDevices, connect events, secure context rules, five examples, and try-it labs.

Introduction

HID means Human Interface Device — keyboards, gamepads, special USB gadgets, and many custom controllers speak the HID protocol. WebHID lets a web page talk to those devices (with the user’s permission).

navigator.hid is read-only. When WebHID is available, it returns an HID object you use to request access, list previously allowed devices, and listen for connect / disconnect events.

Understanding the hid Property

Think of navigator.hid as the WebHID “front desk.” The real work happens on the HID object it returns.

• HID object — entry point with methods and events.
• requestDevice() — user picks a device and grants access.
• getDevices() — list devices already granted earlier.
• connect / disconnect — events when devices appear or leave.
• Permissions Policy — if blocked, navigator.hid may be missing entirely.

📝 Syntax

General form of the property:

navigator.hid

Value

• An HID object when WebHID is available in this context.
• Missing / unavailable when unsupported, insecure, or blocked by policy.

Common patterns

// Feature-detect:
if ("hid" in navigator && navigator.hid) {
  // WebHID entry point is available
}

// Request a device (must run from a click handler):
async function pickDevice() {
  const devices = await navigator.hid.requestDevice({
    filters: [] // empty = show more devices; prefer real vendor/product filters
  });
  console.log(devices);
}

// List previously granted devices:
const known = await navigator.hid.getDevices();

Examples Gallery

Examples follow MDN WebHID / navigator.hid patterns. Prefer Try It Yourself on HTTPS in a Chromium browser with a real HID device. requestDevice needs a button click.

const supported = Boolean(navigator.hid);
console.log(supported ? "WebHID available" : "WebHID missing");

WebHID missing
(or "WebHID available" in a supporting browser)

console.log("secure: " + window.isSecureContext);
console.log("hid: " + Boolean(navigator.hid));

if (!window.isSecureContext) {
  console.log("Serve over HTTPS to use WebHID");
} else if (!navigator.hid) {
  console.log("Secure, but WebHID not exposed");
} else {
  console.log("Ready to call getDevices / requestDevice");
}

secure: true
hid: false
Secure, but WebHID not exposed
(messages vary by browser and URL)

async function listGranted() {
  if (!navigator.hid) {
    return "WebHID not supported.";
  }
  const devices = await navigator.hid.getDevices();
  return "granted devices: " + devices.length;
}

listGranted().then(console.log);

WebHID not supported.
(or "granted devices: 0" / a positive count)

async function pickHidDevice() {
  if (!navigator.hid) {
    throw Error("WebHID not supported.");
  }
  // Demo: empty filters. Real apps pass vendorId / productId / usagePage.
  const devices = await navigator.hid.requestDevice({ filters: [] });
  if (!devices.length) {
    return "No device selected.";
  }
  const d = devices[0];
  return "Selected: " + (d.productName || "HID device");
}

// Call pickHidDevice() from a button onclick — not on page load.

WebHID not supported.
(or product name / "No device selected.")

function watchHid() {
  if (!navigator.hid) {
    return { ok: false, message: "WebHID not supported." };
  }
  navigator.hid.addEventListener("connect", (e) => {
    console.log("HID connected:", e.device.productName);
  });
  navigator.hid.addEventListener("disconnect", (e) => {
    console.log("HID disconnected:", e.device.productName);
  });
  return { ok: true, message: "Listening for connect / disconnect" };
}

console.log(JSON.stringify(watchHid()));

{"ok":false,"message":"WebHID not supported."}
(or listening message when supported)

🚀 Common Use Cases

• Specialty controllers — custom gamepads, MIDI-adjacent HID pads, industrial buttons.
• Device dashboards — configure gadgets that speak HID reports in the browser.
• Accessibility hardware — niche input devices with user consent.
• Education / demos — show HID report data for learning electronics.
• Progressive enhancement — WebHID when available; otherwise guide users to another path.

📝 Notes

• Experimental and not Baseline — support is limited (often Chromium-first).
• Not Deprecated or Non-standard on MDN.
• Secure context required (HTTPS / localhost).
• Permissions Policy can remove navigator.hid entirely.
• Related: ink, hardwareConcurrency, JavaScript hub.

💡 Best Practices