RequestX — A Local-First REST API Client for VS Code

RequestX is a production-quality, privacy-first, local-first REST API client built directly into Visual Studio Code. It provides a lightweight, seamless API testing and exploration experience without requiring third-party accounts, cloud synchronization, or external desktop applications like Postman or Insomnia.

Features

• Native VS Code Integration: Opens directly in an editor tab, styled consistently with your current VS Code theme (Dark, Light, or High Contrast).
• Activity Bar Access: Open RequestX from its Activity Bar icon by selecting Open RequestX.
• Native RequestX Sidebar: Start with a prominent New Request button, create and browse saved collections, reopen saved requests, and review recent request history from the Activity Bar.
• Single Instance Lifecycle: Reopening RequestX focuses the existing panel rather than spawning duplicate tabs.
• Strict Webview Security: Runs inside an isolated webview governed by a strict Content Security Policy (CSP) with dynamic nonces and restricted local resource roots.
• Interactive Request Editor:
  • Method selector: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.
  • Monospace URL address bar with Enter key execution.
  • Query parameters table with enable/disable toggles.
  • Custom headers editor with active count badges.
  • Request body editor with support for None, JSON (with one-click formatting), and raw Text.
• Response Inspection Pane:
  • Color-coded HTTP status badge.
  • Response duration (latency) and size metrics.
  • Tabbed viewers for response body and response headers.
  • Raw-text, formatted JSON, and escaped HTML-source views; returned HTML is never executed.
  • JSON syntax highlighting for keys, strings, numbers, booleans, null values, and punctuation.
  • Search within the displayed response body with case-insensitive matching, match counts, and previous/next navigation.
  • Copy actions for the original response body and response headers, with success/failure feedback.
  • Empty-body and binary/unsupported content-type notices, plus a warning for responses larger than 5 MB.
  • Visual loading spinner and empty states.
• Typed Messaging Protocol: Full bidirectional type safety between Extension Host and React Webview using TypeScript discriminated unions.

Response Viewer Limits

• Responses are still fully buffered by the HTTP service and passed to the webview as text; large responses are not truncated. Binary content is inferred from MIME-type hints, which cannot reliably identify mislabeled or untyped bytes. Such payloads are still decoded as UTF-8 by the existing HTTP service and may not be represented faithfully.
• A warning appears above 5 MiB (the viewer's 5 MB threshold). JSON syntax highlighting is disabled for displayed bodies larger than 1 MB to limit rendering cost.
• Search counts all matches but retains at most 10,000 match positions for navigation. Searching very large bodies still scans their full text and may take time.
• JSON formatting runs only when requested and leaves the original response unchanged. HTML is shown as escaped source text, never loaded into a frame or executed.

Collections and Request History

• Every sent request is recorded locally in RequestX history, including requests that later fail. History keeps the latest 100 requests and can be cleared from the sidebar toolbar.
• History stores request details (including configured headers and body) to support reopening and resending; response bodies are not stored in history. Stored data remains in local VS Code extension storage.
• Saved collections remain separate from history. Selecting a history entry loads it as an unsaved request; selecting a saved collection request retains its existing saved-request behavior.

Architecture Overview

RequestX/
├── .vscode/                   # Launch & task configuration for F5 debugging
├── src/                       # Extension Host (Node.js runtime)
│   ├── extension.ts           # Extension entrypoint & command registration
│   ├── panels/
│   │   └── RequestXPanel.ts   # Webview controller, lifecycle, CSP & messaging
│   ├── messaging/
│   │   └── protocol.ts        # Strongly typed messaging contracts
│   └── models/
│       └── http.ts            # Shared HTTP request and response models
├── webview-ui/                # Webview User Interface (Browser runtime)
│   ├── src/
│   │   ├── index.tsx          # React DOM entrypoint
│   │   ├── App.tsx            # Root application layout
│   │   ├── components/
│   │   │   ├── request-editor/# URL bar, method selector, tabs, editors
│   │   │   └── response-viewer/# Response status, body viewer, headers
│   │   ├── hooks/             # VS Code API bridge (acquireVsCodeApi)
│   │   └── styles/            # VS Code native theme CSS tokens
│   └── tsconfig.json          # Webview TypeScript configuration
├── tests/                     # Unit and integration test suite (Vitest)
├── build/                     # Bundler script (esbuild for extension & webview)
├── dist/                      # Bundled production output
└── package.json

Security & Privacy Guarantee

• Zero Cloud: Requests never leave your machine except to the specific target server you define.
• No Telemetry or Tracking: No analytics, telemetry, or user behavior tracking of any kind.
• Local Storage Only: All collections and configurations are stored in your local workspace or extension storage.

Getting Started & Development

Prerequisites

• Node.js v20 or newer
• VS Code v1.90.0 or newer

Installation

Clone the repository and install dependencies:

git clone https://github.com/skullxcode/RequestX.git
cd RequestX
npm install

Build Scripts

# Compile and build both extension host and React webview
npm run build

# Watch mode for iterative development
npm run watch

# Run TypeScript typecheck on both extension host and webview
npm run compile

# Run unit tests
npm test

# Run ESLint
npm run lint

Debugging with Extension Development Host

1. Open this repository in VS Code.
2. Press F5 (or go to Run and Debug and select Run RequestX Extension).
3. A new [Extension Development Host] window will open.
4. Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) to open the Command Palette.
5. Run the command: RequestX: Open API Client.
6. The RequestX interface will open in an editor panel.

Roadmap

• [x] Milestone 1: Extension Foundation, Webview Security, React UI Scaffold, and Typed Messaging Bridge.
• [x] Milestone 2: Node.js HTTP Execution Engine, cancellation tokens, timeout handling, query param serialization, and network error reporting.
• [x] Milestone 3: Collections and Local Persistence (atomic storage, collections tree sidebar, request saving, and dirty tracking).
• [x] Milestone 4: Enhanced response viewer (JSON syntax highlighting and formatting, raw and HTML-source views, search/navigation, copy actions, and large-response warnings).
• [ ] Milestone 5: Environment variables ({{baseUrl}}), active environment switching, and Auth helpers (Bearer, Basic).
• [ ] Milestone 6: cURL import/export, OpenAPI import, and assertions.

License

This project is licensed under the MIT License.