Request Builder

Method, URL, headers, query and body. Query parameters are edited as rows and the assembled URL is shown beneath — hand-editing a query string is where encoding bugs come from.

src/components/ui/request-builder.tsx

About

From the component's own source, where it was written.

Compose an HTTP request: method, URL, headers, query and body.

Query parameters are edited as rows, not as a query string. Hand-editing a URL is where encoding bugs come from — a & inside a value silently becomes a parameter boundary — and the assembled URL is shown read-only underneath so you can still see exactly what will be sent.

Query, headers and body are stacked disclosures rather than tabs. Their heights differ a lot, so a shared tab panel resizes the card on every switch and the strip moves out from under the pointer. Stacking also lets you see the parameters and the body at once, which is what composing a request takes.

Rows can be disabled rather than only deleted. Toggling a header off to test something and back on again is the actual workflow; deleting it means retyping it.

The body tab is disabled for methods that do not carry one. GET with a body is legal in the RFC, widely unsupported in practice, and offering it invites an afternoon debugging a proxy that stripped it.

Install

npx astralyx-ui add request-builder

Usage

import { RequestBuilder } from '@/components/ui/request-builder'

<RequestBuilder method={method} url={url} params={params} onSend={send} />

Composer

Change the props and the source below follows.

https://api.example.com/v1/users?limit=25

Props

method

sending

tsx

<RequestBuilder
  method="GET"
  url={url}
  params={params}
  headers={headers}
  onSend={send}
/>

Examples

Composing a request

tsx

<RequestBuilder method={method} onMethodChange={setMethod} url={url} … />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`RequestBuilder`

Compose an HTTP request: method, URL, headers, query and body.

Extends Omit<ComponentProps<'div'>, 'onChange' | 'children'>.

Prop	Type	Default	Description
method	string	'GET'	—
onMethodChange	(method: string) => void	—	—
url	string	''	—
onUrlChange	(url: string) => void	—	—
headers	RequestRow[]	[]	`{ id, name, value, enabled? }`. Rows toggle off rather than only delete — that is the actual workflow.
onHeadersChange	(rows: RequestRow[]) => void	—	—
params	RequestRow[]	[]	`{ id, name, value, enabled? }`. Rows toggle off rather than only delete — that is the actual workflow.
onParamsChange	(rows: RequestRow[]) => void	—	—
body	string	''	A GET body is legal in the RFC and widely stripped by proxies. Offering it invites an afternoon of debugging.
onBodyChange	(body: string) => void	—	—
onSend	() => void	—	Omit to render a request editor with no send control.
sending	boolean	false	—
urlPlaceholder	string	'https://api.example.com/v1/users'	—
urlLabel	string	'Request URL'	—
sendLabel	ReactNode	'Send'	—
headersLabel	ReactNode	'Headers'	—
paramsLabel	ReactNode	'Query'	—
bodyLabel	ReactNode	'Body'	—
addLabel	ReactNode	'Add row'	—
removeLabel	string	'Remove row'	—
enableLabel	string	'Include this row'	—
nameePlaceholder	string	'name'	—
valuePlaceholder	string	'value'	—

Types

`RequestRow`

Field	Type	Description
id	string	—
name	string	—
value	string	—
enabled?	boolean	—

Behaviour

Topic	Detail	Description
assembled URL	shown read-only	Built with `URL`, so values are encoded. An `&` inside a value would otherwise become a parameter boundary.