Express Map: Visual Route and Middleware Navigation for VS Code
Express Map is a free, open source VS Code extension that provides visual navigation for Express.js applications. It statically analyses your project and renders an interactive sidebar tree of every route, middleware layer, and template file – with no running server required. It is available now on the Visual Studio Code Marketplace and GitHub.
The State of Express Tooling in VS Code
Express.js is one of the most widely used Node.js frameworks, but the VS Code extension ecosystem around it has been largely stagnant since 2017. The available options are almost entirely snippet collections targeting Express 4, many of which have not seen an update in seven or more years. The one meaningful exception is a route viewer extension with under 400 installs that acknowledges a known prefix resolution bug in its own documentation and provides no middleware or template awareness. Express Map was built from scratch to fill that gap with accurate static analysis, full prefix resolution, and a complete picture of how requests move through an Express application.
Features
Route Tree
Every route in the project is displayed in a sidebar tree with its HTTP method, fully resolved path including all app.use()prefix propagation at any depth, source file, and line number. Routes are expandable to show their middleware chain in order and the template they render if applicable. Clicking any route navigates directly to its definition.
Middleware Chain Visualization
For each route, Express Map surfaces the complete ordered middleware stack: global middleware registered on app, router-level middleware registered on the router, and route-level middleware passed as handler arguments. Each middleware entry shows its name if it is a named function, or its file and line number if it is anonymous.
Template Navigation
Routes that call res.render() are linked to the template they render. The template name appears as a child of the route in the tree and is clickable. A separate Templates group shows every template file with the routes that render it, making it possible to navigate from template to route or route to template.
Orphaned Template Detection
Template files that exist in the views directory but are never referenced by any res.render() call are listed under an Orphaned Templates group. These are candidates for cleanup.
Broken Reference Detection
Routes that call res.render() with a template name that does not exist in the views directory are flagged with a red squiggle on the call site, an entry in the Problems panel, and a Broken References group in the tree.
Duplicate Route Detection
Multiple handlers registered for the same HTTP method and resolved path are grouped under a Duplicate Routes section with a warning indicator. Express silently uses the first match, so this detection surfaces conflicts that are otherwise invisible.
CodeLens
Route metadata appears inline above each handler function in the editor:
GET /admin/users · 2 middleware · renders admin/users
Clicking the CodeLens label reveals that route in the Express Map panel.
Async Safety Warnings
Async route handlers with no try/catch block are flagged with a warning. In Express 4, unhandled promise rejections crash the server. In Express 5, this is handled by the framework, so warnings are automatically suppressed when Express 5 is detected.
Copilot Integration
Express Map registers a Copilot language model tool that gives the AI a structured understanding of the full application — routes, templates, broken references, async issues, duplicates, and orphaned templates — without manual description. The tool only runs when explicitly referenced in a Copilot Chat message and never sends data to the model automatically or in the background.
Auto-Refresh
A file system watcher monitors all .js, .ts, and .ejs files in the workspace. Any change triggers a debounced re-analysis at 500ms so the tree stays current without manual refresh.
Supported Template Engines
EJS, Pug, Handlebars, Mustache, Nunjucks, Twig, Liquid, and Eta. Template engine detection is automatic via app.set('view engine', ...) inspection with a fallback to views directory scanning.
Express Version Compatibility
Express Map supports both Express 4 and Express 5. The detected version is shown in the status bar tooltip. Express 5 path syntax including optional params ({:param}) and named wildcards ({*name}) is fully supported. Async safety warnings are suppressed for Express 5 projects where the framework handles promise rejection natively.
How It Works
Express Map uses Babel’s AST parser to read source files without executing them. On activation it finds the entry point via the package.json main field or common filenames, follows require() calls to discover all router files, detects app.set('views', ...)and app.set('view engine', ...) calls, and records every route registration with its full prefix stack resolved at any depth.
Dynamic route paths using template literals are converted to parameterized equivalents where possible. Fully dynamic paths built from variables or computed expressions are represented as [varName] in the tree.
Known Limitations
Dynamic render calls where res.render(view) receives a variable rather than a string literal cannot be statically resolved. Routers exported through index files with re-exports may not always be followed. Array-mounted sub-routers (app.use(['/a', '/b'], router)) are analysed using the first mount path when routes share the same source file.
Installation
Search for Express Map in the VS Code Extensions panel, or install directly from the Marketplace listing. The extension requires VS Code 1.118.0 or later and activates automatically in any workspace containing a package.json.
Source code is available at github.com/ConnorOnTheWeb/express-map.