REST UI - Visual REST Client

A graphical UI for .rest and .http files inside VS Code.

Visual REST Client overview

Features

Visual Editor for .rest / .http files — no more hand-editing raw text
Sidebar listing all requests in the file (separated by ###)
Method selector, URL input, headers table, and body editor
Built-in HTTP client — send requests and view responses directly in VS Code
REST Client compatible — reads and writes the same .rest file format used by Huachao Mao's REST Client extension
Response viewer with body, headers, status code, timing, and size
JSON formatting for request bodies and responses
Drag & drop to reorder requests
Duplicate / delete requests from the sidebar
Auto-save — every change is written back to the .rest file automatically

Getting Started

1. Create a `.rest` or `.http` file

Create a new file in your workspace with the .rest or .http extension, for example queries.rest:

### Login
POST https://example.com/api/login
Content-Type: application/json

{
  "username": "admin",
  "password": "secret"
}

### Fetch Todos
GET https://jsonplaceholder.typicode.com/todos/
Content-Type: application/json

### Update Item
PATCH https://example.com/api/items/1
Content-Type: application/json

{
  "name": "Updated",
  "active": true
}

Tip: Each request starts with ### followed by an optional name. An empty line separates headers from the body.

2. Open the Visual Editor

There are three ways to open the visual editor:

Method	How
Editor title bar	Open the `.rest` file, then click the REST UI icon in the top-right corner of the editor
Explorer context menu	Right-click a `.rest` or `.http` file in the Explorer → Open Visual REST Client
Command Palette	`Ctrl+Shift+P` / `Cmd+Shift+P` → Open Visual REST Client

The visual editor opens as a custom editor tab — your requests appear in a sidebar on the left, and the editor panel on the right.

3. Edit Requests

Select a request from the sidebar on the left
Change the HTTP method using the dropdown (GET, POST, PUT, PATCH, DELETE, …)
Edit the URL, headers, and body in the form fields
Click + Add Header to add new headers
All changes are saved back to the .rest file automatically

4. Send a Request

Click the Send button on any request
The response panel appears below with:
- Status code and status text
- Response time and response size
- Response body (JSON responses are automatically formatted)
- Response headers

Sending a request and viewing the response

5. Organise Your Requests

Drag & drop requests in the sidebar to reorder them
Duplicate a request using the sidebar action button
Delete a request from the sidebar
Rename a request by editing the name field

.rest File Format

The extension uses the standard REST Client file format:

### Request Name
METHOD https://url
Header-Name: Header-Value
Another-Header: Value

{
  "optional": "body"
}

### separates requests — text after ### is the request name
Headers follow the METHOD URL line, one per line
An empty line separates headers from the body
Lines starting with # or // are comments

Compatibility

Fully compatible with .rest and .http files from the REST Client extension. You can switch between the text editor and the visual editor at any time — both read and write the same file.

Development

# Install dependencies
npm install

# Compile
npm run compile

# Watch mode
npm run watch

# Launch in VS Code
# Press F5 to open Extension Development Host

License

MIT

Visual REST Client

Paweł Karpiński