PointHTTPConvert Your .http Files Into A Stunning Interactive Playground
PointHTTP automatically generates an elegant, in-browser REST client and documentation portal for your Express, NestJS and other nodejs frameworks backend with zero extra setup.
⚡ Interactive Experience Sandbox
Experience PointHTTP in action! Try selecting endpoints on the left, editing environment variables inside the grid, and clicking "Send Request" to watch responses render in our collapsible JSON tree viewer.
PointHTTP Playground (.http REST Client)
Consolidated, fully interactive API documentation. You can test and execute requests directly inside your browser!
# 3. GET USER PROFILE
# =========================================================================
API Response
Drawer Awaiting Request
Click a "▷ Send Request" link inside the HTTP cards to open results.
📦 Built for Modern API Workflows
A self-contained development tool that empowers your testing suite and document pipelines.
Modular Folder Scanning
PointHTTP recursively crawls your specified directory, scans modular .http documents, and automatically mounts them into a structured, clickable tree layout.
In-Browser Request Engine
Requests are executed using your browser's native fetch API. Test local environment APIs, staging networks, and cookie-authenticated sessions directly.
Dynamic Variables Grid
Features a live-syncing key/value grid editor allowing developers to update dynamic credentials (e.g. baseUrl or JWTs) which auto-inject into active paths.
Collapsible JSON Tree
Ditch huge, unreadable JSON blobs. Inspect nested structures with an interactive collapsible tree supporting custom styling for strings, booleans, and nulls.
Local Storage Snapshots
Save response states, request variables, and history directly inside the user's browser, keeping their playground workspace cached across sessions.
100% Insulated SSRF Protection
Since all network calls dispatch from the user's browser client and not the hosting Node server, your internal servers are perfectly isolated from request forgery exploits.
📄 How to Write .http Files
PointHTTP parses standard RFC 2616 REST Client files. Organize your workspace using simple .http sheets to define variables, path structures, and interactive actions.
💡 Syntax Convention Reference
PointHTTP reads and converts raw REST client syntax directly into active playground cards. Below is a detailed breakdown of the syntax rules:
### Request Titles
Prefix any API request with a ### Request Title line. PointHTTP extracts this title to automatically label the action buttons inside your interactive sidebar, search indexes, and card headers.
# Descriptions & Inline Comments
Lines prefixed with a single # are parsed as comments. Comments declared directly beneath a request title are parsed by PointHTTP to populate user-facing **descriptions and tooltips** for that API endpoint.
@ Environment Variable Definitions
Declare local variables at the top of your sheet using @variableName = value. PointHTTP automatically preloads these into the Active Environment Variables spreadsheet where users can modify them live.
{{variableName}} Dynamic Replacements
Reference active variables anywhere inside your **URLs, Headers, or JSON payload body** by wrapping them in double-curly braces: {{variableName}}. PointHTTP interpolates them on-the-fly when triggering calls.
❓ Query Strings & Path Parameters
PointHTTP fully supports path parameters (e.g. /orders/{{orderId}}) and standard query strings. You can write query parameters over multiple lines for readability, and comment out specific variables (e.g. # &status=shipped) to easily toggle them.
⚡ Request Separation
To organize multiple API requests within a single document, separate the request blocks using ### as a block delimiter line.
### Orders Module API Documentation
# Use REST Client in VS Code or similar HTTP client to execute these requests.
@baseUrl = http://localhost:5300/api/v1
@authToken = ph_token_live_7x89yZ12
@orderId = ord_1029384756
###
# ==========================================
# 1. ORDER CREATION ENDPOINTS
# ==========================================
### Create Product Order
# Submit customer details, items, and shipping info to place a new order.
POST {{baseUrl}}/orders
Authorization: Bearer {{authToken}}
Content-Type: application/json
{
"customerId": "f47ac10b-58cc-4372-a567-0e02b2c3d479",
"items": [
{
"productId": "550e8400-e29b-41d4-a716-446655440000",
"quantity": 2,
"price": 49.99,
"currency": "USD"
}
],
"shippingAddress": {
"street": "123 Tech Lane",
"city": "San Francisco",
"country": "USA"
}
}
###
# ==========================================
# 2. ORDER QUERY ENDPOINTS
# ==========================================
### Get Order by ID
# Path parameter is automatically replaced with live variables.
GET {{baseUrl}}/orders/{{orderId}}
Authorization: Bearer {{authToken}}
### Get Customer Order History
# Multi-line URL with optional commented query parameters.
GET {{baseUrl}}/orders/history
?page=1
&limit=10
# &status=shipped
# &startDate=2025-01-01T00:00:00Z
# &endDate=2025-12-31T23:59:59Z
# &searchValue=cust_82349102
Authorization: Bearer {{authToken}}⚡ Integration in 2 Minutes
Mount PointHTTP as a standard Express-compatible middleware and expose it safely in your Node environments.
playground()import express from 'express';
import { playground } from 'pointhttp';
const app = express();
// 1. Zero-config: Scans default src/modules
app.use('/docs/http', playground());
app.listen(3000, () => {
console.log('⚡ Running at http://localhost:3000/docs/http');
});playground(options)import express from 'express';
import { playground } from 'pointhttp';
import path from 'path';
const app = express();
// 2. Custom configuration & preloaded variables
app.use(
'/docs/http',
playground({
modulesDir: path.join(process.cwd(), 'src/endpoints'),
title: 'Custom API Docs Portal',
logoText: 'C1',
logoTitle: 'CustomDocs',
// Preload custom authorization and default variables
envVariables: {
baseUrl: 'https://api.production.com/v1',
authToken: 'ph_token_live_7x89yZ1239840abcde',
},
// Allowed environments for security verification
enabledEnvironments: ['development', 'test', 'staging'],
})
);
app.listen(3000);💡 Configuration Parameters Explained
Calling playground() with no parameters automatically scans your workspace directory for .http files. To custom-brand your documentation or preset environment variables, pass a configuration object:
🛡️ Enterprise Grade Security Gateways
Insulate your sandbox and staging playgrounds from unauthorized traffic. Define granular access controllers.
⚡ Alphanumeric Secret Code
Perfect for lightweight authorization. Team members gain access by visiting a URL formatted with a query parameter code, e.g., https://yourdomain.com/docs/http?code=SECRET_ACCESS_CODE. The middleware intercepts and evaluates this on the server.
playground({
modulesDir: path.join(process.cwd(), 'src/modules'),
customAuth: (req, res) => {
// Alphanumeric URL query parameter code verification
const accessCode = req.query?.code;
const SECRET_ACCESS_CODE = process.env.PLAYGROUND_ACCESS_CODE || 'A89F2K8Z';
return accessCode === SECRET_ACCESS_CODE;
}
})
# 2. ADMIN AUTHENTICATION
# =========================================================================