A React application for testing and visualizing Xbox controller inputs in real-time. This application uses the Gamepad API to detect and display controller state, including buttons, axes, and vibration capabilities.
- Real-time display of controller inputs
- Support for multiple connected controllers
- Button state visualization
- Joystick position visualization
- Haptic feedback testing (if supported by the controller)
- Diagnostic tools
- A modern web browser that supports the Gamepad API (Chrome, Firefox, Edge)
- An Xbox controller or other HID-compliant gamepad
- Node.js and npm for development
- Clone this repository
- Install dependencies:
npm install - Start the development server:
npm start - Open your browser to
http://localhost:3000 - Connect your controller via USB or Bluetooth
- Press any button on the controller to activate it
The Gamepad API is supported in most modern browsers:
- Chrome 35+
- Firefox 29+
- Edge 12+
- Safari 10.1+
Note that some features (like vibration) may not be supported in all browsers or with all controllers.
If your controller is not detected:
- Make sure it's powered on and connected
- Press a button on the controller to activate it
- Try refreshing the page
- Some browsers require HTTPS for Gamepad API access
- Check browser console for errors
This project was bootstrapped with Create React App.
npm start- Runs the app in development modenpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from Create React App
MIT