Visual REST Client

A graphical REST client for .rest and .http files inside VS Code. It reads and writes the same text format used by Huachao Mao's REST Client extension, while giving you a visual editor for requests, variables, responses, and collections.

Features

• Visual editor for .rest and .http files.
• Sidebar with request search, method filters, collections, drag and drop ordering, duplicate, and delete actions.
• Request editor with method selector, URL field, headers table, body editor, comments, and JSON visual editing.
• Built-in HTTP sender with cancellation, redirects, compressed responses, bounded response sizes, status, timing, body, headers, and per-request history.
• 🟢 (new!) Response-wide find in the tab bar, with highlighting and match navigation for Body, Preview, Headers, and Request. Thanks to Juan Sebastián Echeverry!
• Sent request preview and cURL export with known secret values and sensitive headers redacted.
• @name = value file variables and {{name}} interpolation in URLs, headers, and bodies.
• 🟢 (new!) Root-level .env / .env.* environments with automatic workspace-storage fallback, plus import/export migration controls. Thanks to Juan Sebastián Echeverry!
• 🟢 (new!) Environment values masked by default, with per-value reveal controls; managed credentials can still be locked in VS Code Secret Storage.
• Runtime extraction rules for request chaining from JSON paths, response headers, status, or raw body.
• Auth tab with Bearer tokens, split-variable HTTP Basic, and reusable OAuth 2.0 profiles for Authorization Code + PKCE and Client Credentials.
• Secure, workspace-isolated OAuth token storage with automatic refresh, explicit refresh/sign-out controls, and a stable VS Code callback URI.
• Provider-friendly requests with a default User-Agent, including GitHub API compatibility.
• Save response body to a file.
• Copy response body.
• Copy cURL command from the resolved sent request.
• Keyboard shortcuts: Ctrl/Cmd+Enter to send the current request, Ctrl/Cmd+Shift+N to create a request, and Ctrl/Cmd+F to find within the active response tab.
• Postman Collection v2.0/v2.1 import.
• Compatible with Huachao Mao's REST Client .rest / .http file format.
• VS Code Codicons and VS Code font/theme integration.

Visual Walkthrough

The walkthrough follows a request through visual body editing, variables, sending, and response inspection, then demonstrates split-variable Basic Auth and a reusable OAuth 2.0 profile.

Request overview

JSON request body

Variables

Response body

JSON preview

Response headers

Basic authentication

OAuth 2.0

Opening The Editor

Open a .rest or .http file, then use one of:

Method	Action
Editor title bar	Click Open Visual REST Client
Explorer context menu	Right-click the file, then choose Open Visual REST Client
Command Palette	Run Open Visual REST Client

Request Format

@host = https://api.example.com

### Login
POST {{host}}/login
Content-Type: application/json

{
  "email": "me@example.com",
  "password": "secret"
}

### Current user
GET {{host}}/me
Authorization: Bearer {{token}}

• ### starts a request.
• Text after ### becomes the request name.
• Headers follow the METHOD URL line.
• An empty line separates headers from the body.
• File-level variables use @name = value.
• Variables are referenced as {{name}}.

Variables

Variables can be used in request URLs, headers, and bodies:

GET {{host}}/users/{{user_id}}
Authorization: Bearer {{token}}
X-Tenant: {{tenant_id}}

Resolution order:

file variables < environment variables < runtime variables

That means runtime variables override environment variables, and environment variables override file variables with the same name.

File Variables

File variables are stored in the .rest or .http file and are shared with the file.

@host = https://dev.example.com
@tenant_id = demo

Use them for portable defaults that should travel with the repo.

Environment Variables

Environment variables are named local overrides, not values written to the request file. Their values are masked in the Variables panel until you use the eye control. This prevents accidental disclosure while presenting, but it is a display safeguard, not encryption.

At the root of the workspace containing the REST file, .env is exposed as the default environment and .env.<name> is exposed as <name> (for example, .env.dev becomes dev). Template files such as .env.example, .env.sample, and .env.template are ignored. When supported dotenv files exist, they are the environment source and are shown read-only. When none exist, the existing workspace environment store is used, so projects created before 0.2.0 keep working unchanged.

In workspace-storage mode, mark credentials with the lock control: secret values are stored through VS Code Secret Storage, while ordinary values remain in workspace extension storage. The active environment belongs to the current editor, so two open REST files can safely use different environments.

Example:

dev:
host = https://dev.example.com
token = dev-token

prod:
host = https://api.example.com
token = prod-token

Use the Variables panel to create an environment, select it, and add variables. When you send a request, the selected environment overrides matching file variables.

The same panel provides two deliberate move operations:

• Export to .env writes the complete workspace environment catalog to root-level dotenv files, verifies the files, and then clears the migrated workspace values.
• Import from .env stores the dotenv environments in the VS Code workspace store and then removes the successfully migrated source files.

Both actions confirm before changing sources. Dotenv files contain plaintext and are not automatically ignored by Git; review the generated files and your .gitignore before committing or sharing the workspace. Automatic dotenv loading is scoped to each workspace root; migration actions are disabled in multi-root workspaces because the backward-compatible managed environment store is shared by the workspace.

Runtime Variables

Runtime variables are created from responses while the editor is open. Add extraction rules in the Variables panel under Runtime Extractions.

Examples:

token = $.access_token
user_id = $.user.id
first_item = $.items[0].id
request_id = header.x-request-id
status_code = status
raw_body = body

After a request with extraction rules is sent, later requests can use those values:

GET {{host}}/me
Authorization: Bearer {{token}}

Runtime variables are shown read-only in the Variables panel. Use Clear runtime variables to reset the current editor session. For predictable memory use, one response evaluates at most 32 extraction rules, with a 256 KiB limit per value and a 1 MiB aggregate limit. A document retains at most 256 runtime variables or 4 MiB of runtime values.

Authentication

Open a request's Auth tab and choose:

• Bearer Token to write Authorization: Bearer <token>.
• Basic Auth to provide separate username and password values.
• OAuth 2.0 to use a reusable OAuth profile.

Bearer and Basic authentication are stored as standard request headers, so the file remains portable. Prefer a locked environment variable such as {{api_token}}, {{basic_username}}, or {{basic_password}} instead of writing a secret directly into the REST file. Basic Auth is saved in the REST Client-compatible Authorization: Basic username:password form. The extension resolves each variable independently, then UTF-8/Base64-encodes the pair immediately before sending.

OAuth 2.0

Open a request's Auth tab, choose OAuth 2.0, and create or select a reusable profile. Profiles are saved as portable comment directives, while access tokens, refresh tokens, and client secrets remain local.

# @oauth github.flow = authorization_code_pkce
# @oauth github.authorizationUrl = https://github.com/login/oauth/authorize
# @oauth github.tokenUrl = https://github.com/login/oauth/access_token
# @oauth github.scopes = repo user
# @oauth github.clientId = {{github_client_id}}

### Current user
# @oauth-use github
GET https://api.github.com/user

Supported flows:

• Authorization Code + PKCE opens the system browser, validates a single-use state value, exchanges the returned code using PKCE-S256, and resumes the waiting request.
• Client Credentials obtains a token directly from the token endpoint. Client authentication may use HTTP Basic, request-body credentials, or no client secret.

Add client IDs to the active environment when they vary locally. A profile using a client secret must reference one locked environment variable, for example {{oauth_client_secret}}. Literal client secrets are rejected. Provider-specific authorization and token parameters can be entered as name=value, one per line.

For browser login, copy the redirect URI shown in the Auth tab into the OAuth application's allowed callback list. Desktop VS Code normally uses:

vscode://prawel.rest-ui/oauth/callback

VS Code Remote may resolve that callback to a different browser-reachable URI. The Auth tab always shows the current value; compatibility depends on the provider accepting that exact redirect URI.

Tokens are isolated by workspace, REST file, environment, and profile in VS Code Secret Storage. The extension refreshes expiring tokens automatically, handles refresh-token rotation, and provides explicit Refresh, Cancel, and Sign out controls. OAuth adds the Bearer header only while sending. If a request using an OAuth profile already contains an Authorization header, the send is stopped with a conflict error.

Sending Requests

Click Send or press Ctrl/Cmd+Enter. While a request is running, use Cancel to abort it.

Before a request is opened, the extension blocks unresolved {{variables}} and oversized request bodies. It follows a bounded number of redirects, decompresses gzip, deflate, and Brotli responses, and limits both downloaded and decoded bytes. Redirects to a different origin do not retain credential-bearing headers such as authorization, cookies, API keys, tokens, or secrets. A cross-origin redirect is blocked if it would replay a request body containing a known secret. Up to eight requests may run concurrently per REST file by default.

By default, sending with an environment named like prod, production, or live requires a modal confirmation. The matching pattern and all transport limits can be changed under Settings → Visual REST Client.

The response panel includes one find control at the right of its tab bar. It searches the currently selected tab case-insensitively; use Enter/Shift+Enter or the arrow buttons to move through matches, or press Ctrl/Cmd+F while working in the response.

The response tabs are:

• Body: formatted response body, with pretty/raw JSON toggle when available.
• Preview: JSON tree for JSON responses; find matches keys and scalar values and expands collapsed paths as needed.
• Headers: response headers.
• Request: the resolved request that was actually sent.
• Response history selector for previous sends of the same request.

Response history keeps up to ten entries per request within a shared 20 MiB per-document memory budget.

Use Copy, Save, or cURL from the response toolbar.

Organising Requests

• Search requests from the sidebar.
• Filter requests by method.
• Drag and drop requests to reorder them.
• Set a collection name to group requests.
• Drag requests onto a collection header to move them into that collection.
• Drop a request on empty sidebar space to remove its collection.
• Duplicate or delete requests from the sidebar row actions.

Postman Import

Import a Postman Collection JSON file from:

Method	Action
Sidebar toolbar	Click the import button
Command Palette	Run Visual REST Client: Import Postman Collection

The importer preserves:

• request names, methods, URLs, headers, and bodies
• nested folders as collections
• collection variables as file variables
• request descriptions as comments

Disabled fields are skipped. File form fields and unsupported body modes are omitted with an import warning because they cannot be represented safely.

Compatibility

Visual REST Client reads the common .rest / .http syntax used by Huachao Mao's REST Client. Unchanged files round-trip byte-for-byte, including CRLF line endings, multiline query parameters, HTTP version suffixes, unknown directives, and unsupported ### blocks. Visual edits patch modeled fields while retaining surrounding source wherever possible.

The visual model supports GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS, CONNECT, and TRACE. The built-in sender rejects CONNECT; use the REST Client command for that method. Unsupported methods and opaque blocks are preserved in the file but are not visually editable. A body line beginning with ### is interpreted as a request separator, matching the format's normal delimiter behavior.

The built-in sender resolves named {{name}} variables. REST Client dynamic variables that remain unresolved are blocked instead of being sent literally.

Development

Use Node.js 22 and run npm ci, then npm run check. Create a release package with npm run package -- --out visual-rest-client.vsix. Regenerate the upload-ready README screenshots and animated walkthrough with npm run screenshots:readme.

Changelog

0.2.0 - 2026-08-19

• Added response-wide find for Body, Preview, Headers, and Request, with match highlighting, wraparound navigation, collapsed-path expansion, and Ctrl/Cmd+F focus.
• Added automatic root-level .env / .env.* environment loading with workspace-storage fallback and safe import/export migration controls.
• Environment values are now masked by default and can be revealed one at a time.
• Aligned Method, URL, environment, Send/Cancel, and Save controls in the request bar.

0.1.9 - 2026-07-23

• Added reusable OAuth 2.0 profiles for Authorization Code + PKCE and Client Credentials, including secure token storage, automatic refresh, and request-time Bearer injection.
• Added Bearer Token and HTTP Basic options to the Auth tab. Basic Auth keeps username and password variables separate until request-time Base64 encoding.
• Added a stable VS Code OAuth callback URI and a default User-Agent for APIs such as GitHub.
• Made the Auth and Comments editors fill the available request pane.

0.1.8 - 2026-07-23

• Reissued the 0.1.7 release content under a new Marketplace version so clients refresh the restored semantic colors and updated README.

0.1.7 - 2026-07-23

Added

• Added request cancellation, redirect handling, gzip/deflate/Brotli decoding, total timeouts, and compressed/decompressed response limits.
• Added configurable request-body and response-size safety limits.
• Added a per-file concurrency limit for pending requests.
• Added per-editor environment selection, encrypted environment secrets, runtime variable clearing, and confirmation before production-environment sends.
• Added document-wide memory limits for runtime extraction and response history.
• Added keyboard request reordering, adjustable sidebar/response panes, stronger focus states, responsive layout, reduced-motion support, and semantic labels.
• Added lossless parser fixtures, transport tests, importer tests, linting, CI, and reproducible VSIX packaging.
• Added README screenshots and an animated walkthrough.

Changed

• Request, response, pending, and history state now use stable request IDs instead of mutable list positions.
• Visual edits are flushed before navigation, save, send, or reordering.
• Unresolved variables are rejected before network activity.
• Sensitive sent-request headers and known secret values are redacted from previews and generated cURL commands.
• Cross-origin redirects remove credential-bearing headers, including API keys and token/secret headers, and block preserved bodies containing known secrets.
• Source-aware serialization now preserves original line endings, whitespace, directives, query continuations, HTTP version suffixes, and opaque blocks.
• Replaced the extension and editor-title icons with a clearer bidirectional request/response mark.

Fixed

• Fixed cross-editor active-environment mismatches.
• Fixed environment storage races and limited decrypted credentials to the active editor environment.
• Fixed stale responses attaching to the wrong request after list changes.
• Fixed request IDs shifting after requests are inserted or deleted externally.
• Fixed delayed body/comment edits being lost during fast navigation.
• Fixed unsafe response JSON element identifiers derived from response keys.
• Fixed non-standard request methods with bodies, including GET, being sent without HTTP body framing and corrupting reused connections.
• Fixed completed requests remaining visually stuck on “Sending…” when response formatting fails; large JSON previews now render only when opened.
• Restored distinct method, status, JSON syntax, and variable-source colors across dark, light, and high-contrast themes.
• Left-aligned collection names in the request sidebar.

0.1.6 - 2026-06-15

Added

• Added REST Client-style file variables with @name = value declarations.
• Added {{variable}} interpolation for request URLs, headers, and bodies.
• Added named environments for local variable overrides stored in VS Code extension storage.
• Added runtime extraction rules in the Variables panel, allowing response values to be saved as runtime variables without editing raw text.
• Added response-derived runtime variables for request chaining, including JSON paths, headers, response status, and raw body extraction.
• Added a Variables panel with usage instructions, precedence rules, and examples for file, environment, and runtime variables.
• Added sidebar search and method filtering.
• Added response history per request, including fixed-format timestamps.
• Added response export to file.
• Added cURL copy support using the resolved request when available.
• Added a Request tab in the response panel showing the resolved request that was sent.
• Added keyboard shortcuts for sending the current request and creating a new request.
• Added VS Code Codicon assets and replaced non-standard emoji/symbol controls with standard VS Code icons.
• Added automated CI checks for linting, compilation, tests, and extension packaging.

Changed

• Request sending now resolves variables before execution while preserving placeholders in the source file.
• Postman collection variables are imported as real REST variables instead of plain comments.
• Environment creation and deletion now use VS Code-native input and confirmation dialogs.
• The webview follows VS Code font settings more closely, including configured UI and editor font settings.
• Saved-query rows reserve action-button space to avoid layout shifting on hover.
• Build scripts now match the current monolithic webview implementation instead of referencing missing src/webview build output.
• Standardized clean, build, check, test, package-listing, and package scripts with pinned local tooling.

Fixed

• Fixed the broken npm run compile / npm run build path caused by the stale webview TypeScript build config.
• Fixed environment add behavior in the webview by moving creation to the extension host.
• Fixed request-history timestamp formatting.
• Fixed generated webview script escaping for runtime extraction parsing.
• Aligned the extension manifest, lockfile, and changelog at version 0.1.6.

Notes

• Variable resolution order is: file variables, then environment variables, then runtime variables.
• Runtime extraction examples:
  • token = $.access_token
  • user_id = $.user.id
  • request_id = header.x-request-id
  • status_code = status
  • raw_body = body

License

MIT