Visualizing MQTT Client Interactions – Experimental Tool Using Mosquitto

Hi everyone,

I’ve been working on a small personal project to help visualize MQTT communications in a more intuitive way, especially in setups where multiple clients are publishing and subscribing to various topics.

Using Mosquitto as the broker (with MQTT v5 features), I created a tool that displays client connections and message flows in real-time, as a sort of interactive spider web. Each client appears as a node, and messages animate dynamically between them based on topic subscriptions. It’s particularly helpful for educational purposes or for debugging/testing MQTT networks.

The visualization relies on:

  • MQTT retained messages and topic conventions for client metadata (connect/disconnect, subscriptions),
  • The clientid property in MQTT v5 to trace message origins and destinations,
  • A lightweight frontend built with D3.js to display the message paths graphically.

It was primarily developed as an experiment to better understand how clients interact through a broker and how topic structures impact communication. You can try it live here if you’re curious:
:backhand_index_pointing_right: https://mqttmap.gcelectronique.fr

Let me know what you think! I’d love to hear any feedback or suggestions for improvements. What would you find useful in a tool like this?

Thanks to everyone here for all the valuable posts — they’ve been super helpful during the development!

Best,

1 Like