Skip to main content

​
Overview

MQTT Explorer’s topic visualization displays your entire MQTT broker namespace as an interactive hierarchical tree. This powerful feature makes it easy to understand complex topic structures, monitor message activity, and navigate through thousands of topics efficiently.
The tree view automatically organizes topics by their hierarchy using the forward slash (/) separator, providing a clear visual structure of your MQTT namespace.

​
Hierarchical Tree Structure

The topic tree visualizes your MQTT namespace in a familiar folder-like structure:
  • Root Node: Displays the broker hostname/connection name
  • Branch Nodes: Represent topic path segments (e.g., home, devices, sensors)
  • Leaf Nodes: Show individual topics with messages
  • Auto-Expansion: New topics automatically expand when messages arrive
Each node in the tree displays:
  • Topic name or path segment
  • Message count badge (number of messages received)
  • Subtopic count (number of child topics)
  • Expand/collapse controls for nodes with children

​
Visual Feedback

​
Real-Time Update Indicators

MQTT Explorer provides immediate visual feedback when topics receive new messages: Animation Highlights
  • Topics flash briefly when new messages arrive
  • Customizable highlight colors based on theme (light/dark mode)
  • Can be disabled in settings if preferred
  • Throttled updates prevent performance issues with high-frequency topics
Selection States
  • Selected topics are highlighted with a distinct background color
  • Hover effects show which topic is under the cursor
  • Keyboard focus indicators for accessibility
Enable “Highlight Topic Updates” in settings to see visual animations when messages arrive on any topic.

​
Mouse Interaction

1

Click to Select

Click any topic to view its details in the sidebar
2

Click to Expand/Collapse

Click the expand icon (▶) or topic name to show/hide child topics
3

Hover Selection (Optional)

Enable “Select topic with mouse over” in settings for automatic selection on hover

​
Keyboard Navigation

Navigate the tree efficiently using keyboard shortcuts:
KeyAction
↓Move to next topic
↑Move to previous topic
→Expand current topic or move into children
←Collapse current topic or move to parent
DeleteDelete selected topic (if supported)

​
Mobile Touch Gestures

On mobile devices:
  • Tap to select a topic and view details
  • Tap expand icon to show/hide child topics
  • Horizontal scroll enabled for wide topic trees
  • Automatic tab switch to Details view after selection
Mobile users: Tap the expand/collapse button separately from the topic name for better control.

​
Performance Optimizations

The tree view is optimized for large-scale MQTT deployments: Throttled Rendering
  • Updates are batched using a moving average algorithm
  • Adaptive update intervals based on render time
  • Automatic throttling when high message rates are detected
  • Uses browser requestIdleCallback for smooth performance
Efficient Updates
  • Only re-renders changed subtrees
  • Memorized components prevent unnecessary renders
  • Subscription-based updates for minimal overhead
Auto-Expansion Control
  • Topics automatically expand on first message
  • Manual expand/collapse overrides auto-expansion
  • Configurable expansion behavior per node
For brokers with thousands of topics, the tree intelligently manages rendering to maintain 60fps performance.

​
Topic Filtering

Quickly find specific topics using the search bar:
  • Real-time filtering: Tree updates as you type
  • Path matching: Matches any part of the topic path
  • Case-insensitive: Finds topics regardless of capitalization
  • Preserved structure: Shows matching topics with their parent hierarchy
1

Start Typing

Just start typing anywhere (when not in an input field) to focus the search
2

Filter Results

The tree automatically shows only matching topics and their parents
3

Clear Filter

Click the X button or clear the search box to see all topics again

​
Topic Metadata

Hover over or select any topic to see metadata:
  • Message Count: Total messages received since connection
  • Last Update: Timestamp of the most recent message
  • Subtopic Count: Number of child topics in the hierarchy
  • Retained Status: Whether the topic has a retained message

​
Best Practices

Use Consistent Naming

Organize topics with clear hierarchies like building/floor/room/device/sensor

Leverage Wildcards

Subscribe to home/# to see all subtopics under home/

Monitor Activity

Watch message counts to identify active vs. inactive topics

Keyboard Navigation

Use arrow keys for fast navigation through large topic trees

​
Accessibility Features

  • ARIA Labels: Screen reader support for topic names and counts
  • Keyboard Navigation: Full keyboard control without mouse
  • Focus Indicators: Clear visual focus states for keyboard users
  • Tab Index: Proper tab order for logical navigation
  • Role Attributes: Semantic HTML with role="treeitem" for assistive technologies

Build docs developers (and LLMs) love

Get started for freeTalk to us