Skip to content
| Marketplace
Sign in
Visual Studio Code>Debuggers>WatchAPI - Code-Synced API Client for Next.js, NestJS & tRPCNew to Visual Studio Code? Get it now.
WatchAPI - Code-Synced API Client for Next.js, NestJS & tRPC

WatchAPI - Code-Synced API Client for Next.js, NestJS & tRPC

WatchAPI

|
34 installs
| (1) | Free
| Sponsor
Auto-sync API requests directly from your backend code. Built for Next.js, NestJS, and tRPC - no manual setup, no drift.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

WatchAPI - Code-Synced API Client

License: MIT CI Open VSX Downloads Contributions Last Commit Discord Chat

Make code as source of truth for your API tests, sync endpoints directly from Next.js, NestJS, and tRPC.

WatchAPI

Why WatchAPI Exists

  • No need to manually write endpoints or reverse-engineer your APIs
  • Reduces API drifts and context switching
  • Closes the gap between actual code and tool for testing

How WatchAPI Works

  • Extracts API schemas as ready to use tests
  • Removes the need to write tests manually
  • Organizing APIs directly in the code editor

Supported Environments

  • Next.js (App router), NestJS, tRPC and PayloadCMS - main focus
  • Next.js (Pages router) - less accurate

WatchAPI

Quick Start

Installation

  1. Install the extension: Marketplace or Open VSX
  2. Click the 'watch' icon in the activity bar
  3. Pull from Code: Auto-detect all Next.js/NestJS/tRPC endpoints (recommended)
  4. Or create manually: Click '+ New Collection' to add endpoints by hand
  5. Navigate and open requests to execute: 'Send Request'

Works locally by default. Sign in optional (enables team features).

HTTP File Syntax

WatchAPI uses .http files compatible with REST Client. Full syntax reference:

Basic Request

GET https://api.example.com/users
Authorization: Bearer {{token}}

Request with Body

POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John",
  "email": "john@example.com"
}

File Variables

Define variables at the top of your .http file:

@baseUrl = https://api.example.com
@token = my-secret-token

GET {{baseUrl}}/users
Authorization: Bearer {{token}}

Environment Variables

Create rest-client.env.json in your workspace:

{
    "local": {
        "baseUrl": "http://localhost:3000",
        "token": "dev-token"
    },
    "production": {
        "baseUrl": "https://api.example.com",
        "token": "prod-token"
    }
}

Use variables with {{variableName}} syntax.

System Variables

Variable Description Example
{{$timestamp}} Unix timestamp (seconds) 1737550800
{{$guid}} Random UUID v4 f47ac10b-58cc...
{{$randomInt min max}} Random integer {{$randomInt 1 100}}
{{$processEnv VAR}} Environment variable {{$processEnv API_KEY}}

Comparison

Feature WatchAPI Postman Thunder Client REST Client
Auto-Import Next.js/NestJS ✓ ✗ ✗ ✗
Native VS Code Extension ✓ ✗ ✓ ✓
Team Collaboration ✓ ✓ Paid / Limited ✗
Production Monitoring ✓ ✓ ✗ ✗
Free Tier ✓ Limited ✓ ✓
Works Offline ✓ Limited ✓ ✓

Privacy & Data

Local-First & Open Source:

  • All collections stored on your machine by default
  • No telemetry or usage tracking
  • Open source under MIT license
  • Optional cloud sync (only when signed in)

Privacy Policy: https://watchapi.dev/privacy

Contributing

Welcome, lets collaborate:

  • Read the Contributing Guide to get started
  • Report bugs via GitHub Issues
  • Request features via GitHub Discussions
  • Submit PRs - we review and merge regularly
  • Review the Code of Conduct before contributing

See SECURITY.md for reporting security vulnerabilities.

Support

  • Report Issues: GitHub Issues
  • Discussions: GitHub Discussions
  • Documentation: docs.watchapi.dev
  • Website: watchapi.dev

License

This project is under the MIT License.


Let your code define the testing workflow

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