HTTP Request Builder
Configure a request visually and generate fetch, axios, cURL, XHR, or Python code instantly
const response = await fetch("https://api.example.com", {
method: "GET",
});
const data = await response.json();
console.log(data);You’re integrating a REST API and need the same request in three places: a cURL command for the docs, a fetch call for the frontend, and a Python requests snippet for the backend script. Writing the same request three times in three syntaxes means mismatched headers, forgotten auth tokens, and wasted time. You need one place to define the request and get all the code variants.
Why This Builder (Not the HTTP Header Parser or Fetch API Builder)
PureDevTools has an HTTP Header Parser for analyzing existing headers and a Fetch API Builder for JavaScript-only fetch code. This tool generates code in five formats — fetch, axios, cURL, XMLHttpRequest, and Python requests — from one visual configuration. Use it when you need the same request in multiple languages. Everything runs in your browser; no data is sent anywhere.
What Is the HTTP Request Builder?
The HTTP Request Builder is a visual tool for constructing HTTP API requests and instantly generating copy-paste code in five formats: fetch API, axios, cURL, XMLHttpRequest, and Python requests. Instead of writing boilerplate manually, you configure the request interactively — method, URL, headers, query parameters, body, and authentication — and the tool outputs syntactically correct code for the language or library you need.
This is useful when:
- You want to test an API endpoint and need a quick cURL command
- You are integrating a third-party API and need to translate docs into working code
- You need to show a colleague how to call an endpoint in different languages
- You are prototyping a fetch call before adding it to your codebase
All code generation happens entirely in your browser. No requests are sent; the tool only builds the code string.
HTTP Method Reference
| Method | Safe | Idempotent | Has Body | Typical Use |
|---|---|---|---|---|
| GET | Yes | Yes | No | Retrieve a resource |
| POST | No | No | Yes | Create a new resource |
| PUT | No | Yes | Yes | Replace an existing resource |
| PATCH | No | No | Yes | Partially update a resource |
| DELETE | No | Yes | No | Remove a resource |
| HEAD | Yes | Yes | No | Retrieve headers only |
| OPTIONS | Yes | Yes | No | Describe communication options (CORS preflight) |
Authentication Methods
| Type | How It Works | When to Use |
|---|---|---|
| None | No authentication header added | Public APIs, open endpoints |
| Bearer Token | Adds Authorization: Bearer <token> | JWTs, OAuth 2.0 access tokens |
| Basic Auth | Adds Authorization: Basic base64(user:pass) | HTTP Basic authentication, some REST APIs |
| API Key (Header) | Adds a custom header (e.g. X-API-Key) | API gateways, many SaaS APIs |
| API Key (Query) | Appends key to query string (e.g. ?api_key=…) | Some public APIs, weather services |
How to Use This Tool
- Select a method — Choose GET, POST, PUT, PATCH, DELETE, HEAD, or OPTIONS from the dropdown.
- Enter the URL — Type or paste the endpoint URL (e.g.
https://api.example.com/v1/users). - Add headers — Switch to the Headers tab. Click Add Header and type a key and value, or click a preset chip to insert a common header instantly.
- Add query parameters — Switch to the Params tab. Click Add Param to append key=value pairs to the URL. Disable individual params with the toggle.
- Configure the body — For POST/PUT/PATCH requests, switch to the Body tab. Select JSON, form-data, or raw and paste or type the body content.
- Set authentication — Switch to the Auth tab and pick a type. Fill in the token, credentials, or API key fields.
- Choose an output format — Click Fetch, Axios, cURL, XHR, or Python to switch the generated code.
- Copy — Click the Copy button next to the output to copy the snippet to your clipboard.
Output Format Reference
Fetch API (JavaScript)
Generates an async/await fetch call compatible with all modern browsers and Node.js 18+. The request body is wrapped in JSON.stringify() for JSON payloads.
const response = await fetch("https://api.example.com/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Alice" }),
});
const data = await response.json();
Axios (JavaScript)
Generates an axios configuration object with method, url, params, headers, and data properties. Axios separates base URL from query parameters cleanly via the params field.
const response = await axios({
method: "post",
url: "https://api.example.com/users",
headers: { "Content-Type": "application/json" },
data: { name: "Alice" },
});
cURL
Generates a curl command with -X for method, -H for headers, and -d for the body. URL is quoted to handle special characters. Query parameters are appended to the URL directly.
curl -X POST \
"https://api.example.com/users" \
-H "Content-Type: application/json" \
-d '{"name":"Alice"}'
XMLHttpRequest (JavaScript)
Generates a classic XHR call using .open(), .setRequestHeader(), and .send(). Useful for environments that don’t support fetch, or when you need fine-grained progress events.
Python requests
Generates a requests library call with the appropriate method function (requests.get, requests.post, etc.). JSON body maps to the json= parameter; query params map to params=; auth token maps to the headers= dict.
import requests
response = requests.post(
"https://api.example.com/users",
headers={"Content-Type": "application/json"},
json={"name": "Alice"},
)
print(response.json())
Common Patterns
REST API with Bearer Token
Set method to POST, enter your endpoint URL, add Content-Type: application/json in the Headers tab, select Bearer Token in Auth and paste your JWT. The generated code includes the Authorization: Bearer … header automatically.
Paginated GET Request
Set method to GET, enter the base URL, then add page and limit query params in the Params tab. The tool appends them as ?page=1&limit=20 in the URL for cURL, fetch, and XHR, and as a params object for axios and Python.
API Key in Query String
Set Auth type to API Key, select Query Param placement, and enter your key name (e.g. api_key) and value. The key is appended to the URL query string in all output formats.
Form Upload
Set method to POST, switch to the Body tab, select form-data, and enter your form fields as key=value pairs. The tool generates the body as a string and sets the appropriate Content-Type header.
Frequently Asked Questions
Does the tool actually send the HTTP request? No. The HTTP Request Builder only generates code — it never sends a real network request. All processing is client-side. To send the request, copy the generated snippet and run it in your terminal, browser console, or application.
Why does the cURL output wrap lines with backslashes?
Each option is placed on its own line followed by \ for readability. This is standard shell line-continuation syntax. You can paste the whole block directly into a Unix/macOS terminal or remove the backslashes and join everything onto one line.
Which auth method should I use for OAuth 2.0?
Use Bearer Token. After exchanging credentials for an access token through your OAuth flow, paste the token in the Bearer Token field. The tool generates Authorization: Bearer <your-token> in the output.
Can I disable individual headers or query params without deleting them? Yes. Each header and query param row has an enable/disable toggle on the left. Disabled rows are excluded from the generated code but preserved in the UI so you can re-enable them later.
Is my API key or token stored anywhere? No. All values are held only in the browser’s memory for the current session. Nothing is sent to any server or saved to localStorage. Closing or refreshing the tab clears all data.
Does the body editor validate JSON? Yes. When the body type is set to JSON, the tool checks that the content is valid JSON and shows a validation error if it is not. Invalid JSON is still included in the generated code so you can see and fix it.
Is my data sent to a server? No. All processing happens entirely in your browser. Your URLs, headers, tokens, and request bodies are never transmitted to any server and remain completely private on your device.