Response Viewer

Status, timing, size, headers and body. The three headline figures share one line because they are read together — a 200 that took 4 seconds is a different result from one that took 40ms.

src/components/ui/response-viewer.tsx

About

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

An HTTP response: status, timing, size, headers and body.

Status, time and size sit together on one line because they are read together — a 200 that took 4 seconds and returned 8MB is a different result from a 200 that took 40ms, and separating them into panels makes that comparison impossible.

Body, headers and raw are stacked disclosures rather than tabs. Their heights differ by an order of magnitude, so a shared tab panel resizes the card on every switch — the strip moves out from under the pointer and the next click lands on nothing. Stacking also lets headers and body be read together, which is what diagnosing a response actually takes.

A JSON body gets the tree view, anything else gets syntax-highlighted text. Rendering JSON as a wall of text is technically honest and practically useless; rendering HTML as a tree is nonsense.

Header names are lower-cased for display. HTTP header names are case-insensitive and servers are inconsistent about them, so preserving the original casing means Content-Type and content-type sort apart in a list someone is scanning alphabetically.

Install

npx astralyx-ui add response-viewer

Usage

import { ResponseViewer } from '@/components/ui/response-viewer'

<ResponseViewer status={200} durationMs={412} sizeBytes={8214} body={json} />

Composer

Change the props and the source below follows.

200OK412ms8.0 KBapplication/json

id:"usr_8812"

name:"Ada Okafor"

0:"admin"

1:"billing"

active:true

cache-control: no-store
content-type: application/json
x-ratelimit-remaining: 4821
x-request-id: req_8812

{
  "id": "usr_8812",
  "name": "Ada Okafor",
  "roles": [
    "admin",
    "billing"
  ],
  "active": true
}

Props

status

duration (ms)

body

tsx

<ResponseViewer
  status={200}
  durationMs={412}
  sizeBytes={8214}
  body={body}
/>

Examples

A 200 with headers and a body

tsx

<ResponseViewer status={200} durationMs={128} sizeBytes={1042} body={body} headers={headers} />

A 404

tsx

<ResponseViewer status={404} durationMs={38} body={{ error: 'not_found' }} />

API

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

`ResponseViewer`

An HTTP response: status, timing, size, headers and body.

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

Prop	Type	Default	Description
status	number	required	—
statusText	string	—	—
durationMs	number	—	Turns amber past a second.
sizeBytes	number	—	—
headers	ResponseHeader[]	[]	Lower-cased and sorted for display — HTTP header names are case-insensitive and servers are inconsistent, which breaks an A–Z scan.
body	string \| object	—	A JSON body gets the tree view; anything else gets highlighted text. Rendering JSON as a wall of text is honest and useless.
contentType	string	—	—
bodyLabel	ReactNode	'Body'	—
headersLabel	ReactNode	'Headers'	—
rawLabel	ReactNode	'Raw'	—
emptyBodyLabel	ReactNode	'No body'	—

Types

`ResponseHeader`

Field	Type	Description
name	string	—
value	string	—

Behaviour

Topic	Detail	Description
sections	stacked disclosures	Not tabs: the three panels differ hugely in height, so a shared tab panel resizes the card on every switch and the strip moves out from under the pointer. Stacking also lets headers and body be read together.