LoRa Mesh Network Demo
Interactive browser simulation of a Meshtastic LoRa mesh network — click nodes to send messages and watch the signal propagate hop-by-hop across the mesh
Overview
A visual, interactive concept demo that simulates how Meshtastic devices communicate over LoRa radio frequencies. Users place and click nodes on a canvas to trigger message broadcasts and observe how the mesh routes packets across nodes, replicating the hop-by-hop propagation of a real LoRa mesh network — all in the browser with no hardware required.
Problem
LoRa mesh networking is a powerful but niche technology that is difficult to demonstrate without physical hardware. I wanted to build a tangible, shareable way to explain how Meshtastic mesh propagation works — especially the idea that a message can travel far beyond the direct radio range of a single node by hopping through intermediate devices.
Constraints
- No hardware dependency — must run entirely in-browser
- Visual propagation must accurately reflect real Meshtastic hop behavior
- Must be intuitive for users with no RF networking background
- Performant enough to animate many simultaneous nodes
Approach
Built a canvas-based node graph where each node has a simulated radio range. Clicking a node fires a broadcast that propagates to all in-range neighbours, which then re-broadcast to their own neighbours (up to the Meshtastic default hop limit), visualising the flood-fill propagation pattern in real time.
Key Decisions
Flood-fill propagation with a hop counter rather than shortest-path routing
Meshtastic uses a flooding algorithm, not smart routing. Simulating shortest-path would be misleading. The hop counter matches the real firmware's MAXHOPS behaviour and naturally limits runaway propagation.
- Dijkstra shortest-path routing (inaccurate to real Meshtastic behaviour)
- Random walk simulation (too unpredictable to be educational)
Canvas 2D rendering instead of SVG or a graph library
Canvas handles hundreds of animated nodes and propagation rings without DOM overhead. SVG would create thousands of elements mid-animation, and a graph library would add abstraction that obscures how the simulation works.
- D3.js force graph
- SVG with CSS animations
- WebGL (overkill for this scale)
Tech Stack
- JavaScript
- HTML5
- Meshtastic Protocol Concepts
- LoRa (simulated)
Result & Impact
The demo makes an abstract RF networking concept immediately tangible. Visitors who have never heard of Meshtastic can grasp mesh propagation within seconds of interacting with it. It is now a flagship piece in the portfolio and has sparked conversations about practical off-grid communication networks.
Learnings
- Simulation fidelity matters — incorrect routing models teach the wrong mental model
- Visual feedback (propagation rings, colour states) dramatically improves comprehension
- Canvas 2D is underrated for interactive network visualisations at this scale
- Documentation and labelling inside the demo reduce the need for external explanation
Try It
Open the live demo, click any node, and watch the message ripple outward through the mesh. Nodes light up as they receive and re-broadcast the signal, pausing when they hit the hop limit — exactly as a real Meshtastic network behaves.