Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>RouteSyncNew to Visual Studio Code? Get it now.
RouteSync

RouteSync

sameer1312

|
10 installs
| (0) | Free
Easily visualize and navigate the connections between your frontend components and backend API routes.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

RouteSync

RouteSync is a Visual Studio Code extension designed for fullstack developers to visualize and navigate all frontend API calls and backend routes in a single, unified view. It helps you easily explore your project’s API surface, grouped by HTTP method and sorted alphabetically for clarity.


✨ Features

  • Automatic Scanning
    Scans your frontend (React/JS/TS) and backend (Express/Node) codebases to extract API calls and route definitions automatically.

  • Grouping & Sorting
    Organizes API endpoints by HTTP method (GET, POST, etc.) and sorts them alphabetically within each group.

  • Interactive Table UI
    Browse all endpoints inside a collapsible, searchable table within VS Code.

  • Click-to-Navigate
    Click any API call or route to jump directly to its source file and line number.

  • Instant Search
    Filter the displayed endpoints dynamically via a search bar.

  • Refresh Button
    Easily rescan your project after code changes with a single click.

  • Output Channel Logging
    View a detailed summary of all API calls and routes in the VS Code Output panel.

  • Zero Configuration
    Works out-of-the-box for common fullstack folder structures like client/server or frontend/backend.


🚀 Getting Started

1. Install RouteSync from the VS Code Marketplace

Search for RouteSync in the Extensions view and install it.

2. Open Your Fullstack Project in VS Code

Ensure your project has a clear frontend/backend folder structure (e.g., client and server).

3. Run RouteSync

  • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
  • Type and select: RouteSync: Open Panel.

4. Explore Your API Map

  • View API calls and backend routes grouped by HTTP method.
  • Use the search bar to filter endpoints.
  • Click entries to navigate directly to the source code.
  • Click the refresh button to update the data after making changes.

🛠️ How It Works

  • Frontend Scanning:
    Detects API calls made using fetch, axios, common custom wrappers, and RTK Query endpoints.

  • Backend Scanning:
    Finds Express-style route handlers such as app.get, router.post, and others.

  • Grouping & Sorting:
    Groups all endpoints by HTTP method and sorts them alphabetically for easy browsing.


🧩 Supported Patterns

Frontend Examples

  • fetch('/api/user/123')
  • axios.post('/api/login', {...})
  • api.get(\/api/item/${itemId}`)`
  • RTK Query endpoints

Backend Examples

  • app.get('/api/user/:id', handler)
  • router.post('/api/login', handler)
  • router.delete('/api/item/:itemId', handler)

📂 Expected Project Structure

RouteSync expects a common fullstack project layout like:


my-project/
├── client/      # or frontend/
└── server/      # or backend/

If these folders don’t exist, it will scan the root directory instead.


⚙️ Configuration

No configuration is needed for typical projects. For custom structures, you may need to tweak the extension or request support.


📝 Sample Output


FRONTEND: GET /api/user/123 (src/components/User.tsx:42)
BACKEND: GET /api/user/\:id (server/routes/user.js:10)
...


📄 License

MIT License


🌐 Connect

  • Author: sameer

⭐ Why RouteSync?

RouteSync saves you time and headaches by providing a live, organized map of your fullstack API surface — making onboarding, debugging, and refactoring smoother and more efficient.


  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft