Skip to main content
MQTT Explorer provides a mobile-friendly experience through its browser mode, allowing you to monitor and interact with MQTT brokers from smartphones and tablets.

​
Mobile Strategy

MQTT Explorer’s mobile support focuses on browser mode rather than native mobile apps:

Browser-First Approach

Access via mobile browser - no app store required

Responsive Design

Adaptive layouts for different screen sizes

Touch-Friendly

Larger tap targets and touch gestures

PWA Support

Install as Progressive Web App for app-like experience
Mobile support targets modern smartphones like Google Pixel 6 (412x915 viewport) as a reference device.

​
Getting Started on Mobile

1

Deploy Server Mode

MQTT Explorer must be running in server/browser mode to access from mobile devices.
# On your server or computer
node dist/src/server.js
See the Environment Variables guide for configuration options.
2

Access from Mobile Browser

Open your mobile browser and navigate to:
  • Local network: http://[server-ip]:3000
  • Public deployment: https://mqtt-explorer.example.com
For remote access, always use HTTPS with proper authentication. See Authentication guide.
3

Login (if enabled)

Enter your credentials if server authentication is configured.
4

Connect to Broker

Use the connection dialog to connect to your MQTT broker, or use auto-connect if configured.

​
Mobile-Optimized Features

​
Responsive Layout

MQTT Explorer automatically adapts its interface for mobile screens:
Mobile Optimizations:
  • Touch-friendly tap targets (minimum 44x44px)
  • Improved scrolling performance
  • Collapsible/expandable nodes with larger touch areas
  • Swipe gestures for navigation
Usage:
  • Tap to expand/collapse topic nodes
  • Long press for context menu (if available)
  • Swipe to scroll through long topic lists
Mobile Optimizations:
  • Stacks vertically instead of side-by-side
  • Optimized chart controls for touch
  • Pinch-to-zoom support
  • Larger legend items
Usage:
  • Scroll vertically to view multiple charts
  • Tap legend items to toggle series
  • Pinch to zoom into time ranges
Mobile Optimizations:
  • Adjusted default positions for mobile viewports
  • Larger drag handles for touch
  • Snap points for common layouts
  • Optimized minimum pane sizes
Usage:
  • Drag dividers to resize panels
  • Double-tap divider to reset to default
  • Hide panels by dragging to edge

​
Connection Management

Mobile Optimizations:
  • Full-screen on small devices
  • Larger form fields and buttons
  • Numeric keyboard for port input
  • Touch-friendly toggles and switches
Best Practices:
  • Save connection profiles for quick access
  • Use descriptive connection names
  • Pre-configure credentials to avoid typing on mobile
The mobile connection selector provides a streamlined experience:
  • Quick profile switching
  • Large, tap-friendly profile cards
  • Swipe to manage profiles
  • Recent connections at top

​
Publishing Messages

Mobile Optimizations:
  • Auto-complete for topic paths
  • Recent topics suggestion
  • Touch-optimized text editors
  • Copy/paste support
Tips:
  • Use templates for frequent messages
  • Copy topics from tree instead of typing
  • Use QoS selector with larger touch targets

​
Core Mobile Workflows

​
Viewing Topics

1

Browse Topic Tree

Tap topic nodes to expand and explore the hierarchy. The tree automatically scrolls to show expanded content.
2

View Message Details

Tap a topic to view its current message value and metadata in the detail panel.
3

Search Topics

Use the search feature (magnifying glass icon) to filter topics. Large search input optimized for mobile keyboards.

​
Publishing Messages

1

Select Topic

Tap the topic in the tree or type the topic path in the publish form.
2

Enter Message

Type your message payload. Use the appropriate keyboard (text, numeric) based on content.
3

Set Options

Select QoS and retain flag using touch-friendly controls.
4

Publish

Tap the large “Publish” button to send your message.

​
Searching and Filtering

1

Open Search

Tap the search icon in the toolbar.
2

Enter Filter

Type your search term. Topics are filtered in real-time.
3

Clear Filter

Tap the X button to clear search and show all topics.

​
Progressive Web App (PWA)

​
Installing as PWA

For an app-like experience, install MQTT Explorer as a PWA:
1

Open in Safari

Navigate to MQTT Explorer in Safari (not Chrome or other browsers).
2

Share Menu

Tap the Share button (square with arrow).
3

Add to Home Screen

Scroll down and tap “Add to Home Screen”.
4

Confirm

Edit the name if desired and tap “Add”.
Benefits:
  • App icon on home screen
  • Fullscreen mode (no browser UI)
  • Faster access
1

Open in Chrome

Navigate to MQTT Explorer in Chrome browser.
2

Install Prompt

Chrome will show an “Install app” banner. Tap “Install”.Or manually: Menu (⋮) → “Add to Home screen” or “Install app”.
3

Confirm

Tap “Install” in the confirmation dialog.
Benefits:
  • App icon on home screen
  • Fullscreen mode
  • Fast app switching
  • Splash screen
PWA features depend on your server configuration. Service workers and manifest files may need to be configured.

​
Viewport Configuration

MQTT Explorer includes proper viewport meta tags for optimal mobile rendering: 
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
This ensures:
  • Correct scaling on mobile devices
  • No unwanted zoom on input focus
  • Proper device width detection
  • Responsive layout activation

​
Feature Prioritization

​
Core Features (Optimized for Mobile)

✅ Fully Functional:
  • View topics and message tree
  • Read current message values
  • Basic navigation and browsing
  • Search and filter topics
  • Simple message publishing
  • Connection management

​
Advanced Features (Available but Less Emphasized)

⚠️ Available but may require desktop for best experience:
  • Advanced connection settings (use smaller text/collapsed sections)
  • Extensive keyboard shortcuts (limited on mobile)
  • Multi-panel simultaneous viewing (panels stack on mobile)
  • Complex chart interactions
For advanced configuration and complex workflows, desktop mode provides the optimal experience. Mobile mode focuses on monitoring and basic interactions.

​
Performance Considerations

​
Large Topic Trees

Mobile devices have limited resources compared to desktops:

Lazy Loading

Topics load incrementally to maintain smooth scrolling

Virtualization

Only visible topics are rendered in the DOM

Throttled Updates

Message updates are throttled to prevent overwhelming the UI

Selective Subscriptions

Subscribe to specific topics instead of # to reduce load
Tips for better performance:
  • Use specific subscriptions instead of wildcards
  • Limit QoS levels where possible
  • Clear old messages periodically
  • Close unused connections

​
Network Considerations

Mobile devices often have unreliable connections:

Connection Retry

Automatic reconnection on network loss

Offline Handling

Graceful degradation when offline

Bandwidth Optimization

Optimized bundle size for faster loading

Compression

Compressed assets for mobile networks

​
Testing on Mobile

​
Desktop Browser Emulation

Test mobile layout during development: 
# Run server
yarn dev:server

# Open in Chrome
# Press F12 for DevTools
# Click device toolbar icon (Ctrl+Shift+M)
# Select "Pixel 6" or other mobile device

​
Real Device Testing

Test on actual mobile devices:
1

Find Server IP

# Linux/Mac
ifconfig | grep inet

# Windows
ipconfig
2

Start Server

yarn dev:server
3

Connect from Mobile

Navigate to http://[server-ip]:3000 on your mobile device (must be on same network).
4

Test Features

  • Touch interactions
  • Scrolling performance
  • Form inputs
  • Layout responsiveness

​
Metrics for Success

A successful mobile experience provides: ✅ Usability:
  • All core features accessible on mobile
  • No horizontal scrolling required
  • Touch targets minimum 44x44px
  • Readable text without zooming
✅ Performance:
  • Smooth scrolling and interactions
  • Quick load times (under 3s on 3G)
  • Responsive touch feedback
✅ Compatibility:
  • Works on iOS Safari and Android Chrome
  • Supports common mobile screen sizes
  • Graceful degradation on older devices

​
Known Limitations

Mobile experience has some limitations compared to desktop:
  • File uploads: Browser file selection limitations
  • Certificate management: Limited by browser security policies
  • Keyboard shortcuts: Many shortcuts not available on mobile
  • Multi-window: Cannot view multiple instances simultaneously
  • Complex layouts: Some advanced features work better on desktop

​
Troubleshooting

Causes:
  • Server not accessible on network
  • Firewall blocking connections
  • Wrong IP address or port
Solutions:
  • Verify mobile device on same network as server
  • Check firewall allows incoming connections on port 3000
  • Use server’s local IP (not 127.0.0.1 or localhost)
  • Test with curl from mobile: curl http://[server-ip]:3000
Causes:
  • Browser doesn’t support responsive features
  • JavaScript disabled
  • Outdated browser version
Solutions:
  • Update mobile browser to latest version
  • Try a different browser (Chrome or Safari)
  • Enable JavaScript
  • Clear browser cache
Causes:
  • JavaScript errors
  • Browser compatibility issues
  • Touch events not supported
Solutions:
  • Check browser console for errors (if possible)
  • Update browser to latest version
  • Try desktop mode as fallback
  • Report issue with device/browser details
Causes:
  • Large topic tree
  • Too many subscriptions
  • High message rate
  • Older mobile device
Solutions:
  • Use specific topic subscriptions instead of #
  • Reduce message retention
  • Clear old data
  • Close unused connections
  • Consider desktop mode for heavy workloads
Causes:
  • Browser autofill interfering
  • Keyboard not appearing
  • Focus issues
Solutions:
  • Tap input field again
  • Disable browser autofill
  • Try a different keyboard app
  • Refresh page

​
Future Enhancements

Planned mobile improvements:
  • Adjust default split pane positions for mobile
  • Increase touch target sizes in critical areas
  • Improve sidebar collapse behavior
  • Optimize tree node spacing for touch
  • Full PWA manifest for “add to home screen”
  • Swipe gestures for navigation
  • Mobile-optimized connection dialog
  • Mobile-specific keyboards (numeric for ports)
  • Offline support with service workers
  • iOS: Safe area handling, notch support
  • Android: Material Design guidelines
  • Dark mode improvements
  • Haptic feedback

​
Best Practices

Pre-Configure Connections

Save connection profiles on desktop to avoid typing on mobile.

Use Auto-Connect

Configure auto-connect with environment variables for instant access.

Specific Subscriptions

Subscribe to specific topics instead of # for better performance.

Landscape Mode

Rotate to landscape for more screen space on small devices.

Install as PWA

Install to home screen for faster access and fullscreen experience.

Stable Connection

Use Wi-Fi instead of cellular data for better reliability.

​
Next Steps

Environment Variables

Configure auto-connect and server settings for optimal mobile experience.

Connection Setup

Learn how to create and manage connection profiles.

Authentication

Secure your mobile access with proper authentication.

GitHub Issues

Report mobile-specific issues or request features.