A professional web-based MQTT client testing platform with a modern interface and comprehensive features.
- Flexible Broker Support - Connect to any MQTT broker via WebSocket
- Authentication - Username/password authentication support
- Auto-generated Client ID - Unique client identifier generation
- Real-time Status - Live connection status monitoring
- Pattern Matching - Support for MQTT wildcard patterns (
+,#) - Multiple Subscriptions - Subscribe to multiple topics simultaneously
- Easy Management - One-click subscription/unsubscription
- QoS Support - Quality of Service level configuration
- JSON Formatting - Built-in JSON formatter with syntax validation
- QoS Levels - Support for QoS 0, 1, and 2
- Content Validation - Real-time JSON syntax checking
- Quick Send - Keyboard shortcuts for efficient publishing
- Real-time Display - Live message feed with timestamps
- Smart Collapsing - Received messages collapsed by default
- Message Controls - Expand/collapse, copy, and clear functions
- Syntax Highlighting - JSON content with proper formatting
- Scrollable Content - Automatic scrolling for long messages
- Mobile Optimized - Tab-based navigation for mobile devices
- Desktop Layout - Multi-panel layout for larger screens
- Modern UI - Gradient backgrounds and smooth animations
- Accessibility - Proper contrast and semantic markup
- Open the HTML file in any modern web browser
- Enter your MQTT broker WebSocket URL (e.g.,
ws://broker.emqx.io:8083/mqtt) - Configure authentication if required
- Click Connect
- Start subscribing to topics and publishing messages
# Clone the repository
git clone https://github.com/yourusername/mqtthub.git
# Navigate to the project directory
cd mqtthub
# Open with a local server (recommended)
python -m http.server 8080
# or
npx serve .
# Open in browser
open http://localhost:8080- HTML5 - Semantic markup
- Tailwind CSS - Utility-first CSS framework
- Vanilla JavaScript - No framework dependencies
- MQTT.js - Robust MQTT client library
- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- MQTT.js - MQTT client for JavaScript
- Tailwind CSS - CSS framework
Broker URL: ws://broker.emqx.io:8083/mqtt
Client ID: mqtt_test_abc123
Username: (optional)
Password: (optional)
sensor/+/temperature # All temperature sensors
device/# # All device topics
home/living/+ # All living room sensors
{
"deviceId": "sensor001",
"temperature": 23.5,
"humidity": 65.2,
"timestamp": "2025-05-30T10:30:00Z"
}- IoT Development - Test device connectivity and message flow
- MQTT Learning - Understand MQTT concepts hands-on
- System Integration - Validate MQTT communication between systems
- Debugging - Troubleshoot MQTT-based applications
- Prototyping - Quick testing of MQTT scenarios
The tool connects to public MQTT brokers by default. For production use:
- Secure Connections - Use WSS (WebSocket Secure) URLs
- Authentication - Configure proper credentials
- Topic Permissions - Ensure proper ACL settings
- Rate Limiting - Consider message rate limits
On mobile devices, the interface switches to a tab-based layout:
- 📡 Connect - Connection configuration
- 📬 Subscribe - Topic subscription management
- 📤 Publish - Message publishing
- 📊 Monitor - Real-time message monitoring
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- MQTT.js for the excellent MQTT client library
- Tailwind CSS for the utility-first CSS framework
- EMQ X for providing public MQTT broker for testing
If you have any questions or issues, please:
- Check the Issues page
- Create a new issue if needed
- Provide detailed information about your environment and the problem
Made with ❤️ for the IoT community