WebHID | Frontend Practical Guide

Overview

The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`HID` Experimental	89	89
`connect_event` Experimental The connect event of the HID interface fires when the user agent connects to a HID device.	89	89
`disconnect_event` Experimental The disconnect event of the HID interface fires when the user agent disconnects a HID device.	89	89
`getDevices` Experimental The getDevices() method of the HID interface gets a list of connected HID devices that the user has previously been granted access to in response to a HID.requestDevice call.	89	89
`requestDevice` Experimental The requestDevice() method of the HID interface requests access to a HID device.	89	89
`worker_support` Experimental Available in workers	131	131
`HIDConnectionEvent` Experimental The HIDConnectionEvent interface of the WebHID API represents HID connection events, and is the event type passed to HID/connectevent and HID/disconnectevent event handlers when a device's connection state changes.	89	89
`device` Experimental The device read-only property of the HIDConnectionEvent interface returns the HIDDevice associated with this connection event.	89	89
`HIDConnectionEvent` Experimental The HIDConnectionEvent() constructor creates a new HIDConnectionEvent object. Typically this constructor is not used as events are created when a device's connection state changes.	89	89
`worker_support` Experimental Available in workers	131	131
`HIDDevice` Experimental The HIDDevice interface of the WebHID API represents a HID Device. It provides properties for accessing information about the device, methods for opening and closing the connection, and the sending and receiving of reports.	89	89
`close` Experimental The close() method of the HIDDevice interface closes the connection to the HID device.	89	89
`collections` Experimental The collections read-only property of the HIDDevice interface returns an array of report formats	89	89
`forget` Experimental The forget() method of the HIDDevice interface closes the connection to the HID device and forgets the device.	100	100
`inputreport_event` Experimental The inputreport event of the HIDDevice interface fires when a new report is received from the HID device.	89	89
`open` Experimental The open() method of the HIDDevice interface requests that the operating system opens the HID device.	89	89
`opened` Experimental The opened read-only property of the HIDDevice interface returns true if the connection to the HIDDevice is open and ready to transfer data.	89	89
`productId` Experimental The productId read-only property of the HIDDevice interface returns the product ID of the connected HID device.	89	89
`productName` Experimental The productName read-only property of the HIDDevice interface returns the product name of the connected HID device.	89	89
`receiveFeatureReport` Experimental The receiveFeatureReport() method of the HIDDevice interface receives a feature report from the HID device. Feature reports are a way for HID devices and applications to exchange non-standardized HID data.	89	89
`sendFeatureReport` Experimental The sendFeatureReport() method of the HIDDevice interface sends a feature report to the HID device. Feature reports are a way for HID devices and applications to exchange non-standardized HID data.	89	89
`sendReport` Experimental The sendReport() method of the HIDDevice interface sends an output report to the HID device.	89	89
`vendorId` Experimental The vendorId read-only property of the HIDDevice interface returns the vendor ID of the connected HID device. This identifies the vendor of the device.	89	89
`worker_support` Experimental Available in workers	131	131
`HIDInputReportEvent` Experimental The HIDInputReportEvent interface of the WebHID API is passed to HIDDevice.inputreport_event event of HIDDevice when an input report is received from any associated HID device.	89	89
`data` Experimental The data property of the HIDInputReportEvent interface returns a DataView containing the data from the input report, excluding the reportId if the HID interface uses report IDs.	89	89
`device` Experimental The device property of the HIDInputReportEvent interface returns the HIDDevice instance that represents the HID interface that sent the input report.	89	89
`reportId` Experimental The reportId property of the HIDInputReportEvent interface returns the one-byte identification prefix for this report, or 0 if the HID interface does not use report IDs.	89	89
`worker_support` Experimental Available in workers	131	131
`hid` Experimental The Navigator.hid read-only property returns an HID object providing methods for accessing HID device connections and events that fire when the user agent connects to or disconnects from a device.	89	89
`hid` Experimental The WorkerNavigator.hid read-only property returns an HID object providing methods for accessing HID device connections and events that fire when the user agent connects to or disconnects from a device.	131	131
Other
`html.elements.iframe.allow.hid` Experimental	89	89			89
`http.headers.Permissions-Policy.hid` Experimental The HTTP Permissions-Policy header hid directive controls whether the current document is allowed to use the WebHID API to connect to uncommon or exotic human interface devices such as alternative keyboards or gamepads.	89	89

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const [device] = await navigator.hid.requestDevice({
  filters: [{ vendorId: 0x1234 }]
});
await device.open();
device.addEventListener('inputreport', (e) => {
  console.log('Report:', new Uint8Array(e.data.buffer));
});

Use cases

Use WebHID
Use WebHID when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply WebHID to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test WebHID in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Use cases

Use WebHID

Handle edge cases

Cautions

Accessibility

Related links