The latest articles on DEV Community by Satnam Sandhu (@satnam_sandhu). https://dev.to/satnam_sandhu https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1377854%2F8ed404af-18c8-4be1-87ff-3b26068799a6.jpeg https://dev.to/satnam_sandhu en Satnam Sandhu Mon, 13 Jul 2026 04:20:11 +0000 https://dev.to/satnam_sandhu/rhumb-static-user-journey-maps-from-your-frontend-source-1pkc https://dev.to/satnam_sandhu/rhumb-static-user-journey-maps-from-your-frontend-source-1pkc <h2> Rhumb: constant-bearing journeys through your app </h2> <p>I wanted a boring answer to a useful question:</p> <blockquote> <p>From this codebase, what are the real paths users can take to reach <code>/checkout</code>?</p> </blockquote> <p>Not “what PostHog recorded last week.” Not “what an LLM invents after reading three files.” Just: <strong>routes + navigation edges → journey paths</strong>, extracted from source.</p> <p>That’s <a href="https://github.com/satnam-sandhu/rhumb" rel="noopener noreferrer">Rhumb</a>.</p> <h2> What it is </h2> <p>Rhumb is a small Python library/CLI that builds <strong>static user-journey graphs</strong> from frontend apps:</p> <ol> <li>Detect the framework from <code>package.json</code> </li> <li>Extract routes (config AST, filesystem routes, or generated route trees)</li> <li>Scan navigation (<code>Link</code>, <code>navigate</code>, <code>redirect</code>, …) with tree-sitter</li> <li>Enumerate paths, group them by <strong>end route</strong>, and attach <strong>gaps</strong> for anything it couldn’t resolve</li> </ol> <p>No app runtime. No LLM in the extract path.</p> <p>Supported today:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Framework</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>React Router</td> <td>Supported</td> </tr> <tr> <td>TanStack Router</td> <td>Supported</td> </tr> <tr> <td>Expo Router</td> <td>Supported</td> </tr> </tbody> </table></div> <p>Next.js, Remix, Vue Router, SvelteKit, Angular — detected or stubbed, not fully extracting yet. This is <strong>alpha (<code>0.1.0</code>)</strong>.</p> <h2> Install </h2> <p>Not on PyPI yet. Install from GitHub:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>uv pip <span class="nb">install </span>git+https://github.com/satnam-sandhu/rhumb.git <span class="c"># or</span> pip <span class="nb">install </span>git+https://github.com/satnam-sandhu/rhumb.git </code></pre> </div> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/satnam-sandhu" rel="noopener noreferrer"> satnam-sandhu </a> / <a href="https://github.com/satnam-sandhu/rhumb" rel="noopener noreferrer"> rhumb </a> </h2> <h3> Constant-bearing journeys through your app </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">Rhumb</h1> </div> <blockquote> <p>Constant-bearing journeys through your app.</p> </blockquote> <p>Static <strong>user journey</strong> graphs from frontend source — routes, navigation edges, and concrete paths. No runtime. No LLM in the extract path.</p> <div class="markdown-heading"> <h2 class="heading-element">Framework support</h2> </div> <p></p><div class="table-wrapper-paragraph"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><table> <thead> <tr> <th>Framework</th> <th>Status</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>React Router</td> <td><strong>Supported</strong></td> <td>Config / JSX routes + Link / navigate / redirect</td> </tr> <tr> <td>TanStack Router</td> <td><strong>Supported</strong></td> <td>FS + <code>routeTree.gen.ts</code> + virtual routes + nav</td> </tr> <tr> <td>Expo Router</td> <td><strong>Supported</strong></td> <td>Filesystem <code>app/</code> + Link / <code>router.*</code><br> </td> </tr> <tr> <td>Vue Router</td> <td>Coming soon</td> <td>Stub registered — SFC + router TS planned</td> </tr> <tr> <td>SvelteKit</td> <td>Coming soon</td> <td>Stub registered — <code>src/routes</code> + Svelte nav planned</td> </tr> <tr> <td>Next.js</td> <td>Coming soon</td> <td> <br> <code>app/</code> / <code>pages/</code> filesystem + Link / redirects</td> </tr> <tr> <td>Remix</td> <td>Coming soon</td> <td>Filesystem routes + nav</td> </tr> <tr> <td>Angular</td> <td>Coming soon</td> <td>TS <code>Routes</code> arrays</td> </tr> <tr> <td>Vite + React (no router)</td> <td>Coming soon</td> <td>Thin / delegate when React Router present</td> </tr> </tbody> </table></div><p></p> <p>Detection already recognizes several of the “coming soon” stacks from <code>package.json</code>; journey extraction ships only for the <strong>Supported</strong> rows today.</p> <div class="markdown-heading"> <h2 class="heading-element">Prerequisites</h2> </div> <p></p><div class="table-wrapper-paragraph"><br><br><br><br><br><br><table> <thead> <tr> <th>Tool</th> </tr> </thead> </table></div>…<p></p></div> <br> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/satnam-sandhu/rhumb" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> python javascript react opensource