<http-transaction>

Displays a complete HTTP request/response pair side by side. This is the main component for showing HTTP exchanges.

Attributes

Attribute	Type	Description
theme	string	Color theme: "light", "dark", or "auto" (default)
highlight	string	Comma-separated sections to highlight: request-line, request-headers, request-body, response-line, response-headers, response-body
box	string	Comma-separated sections to add labeled borders: same values as highlight

Properties

Property	Type	Description
data	Object	HTTP exchange data with structure: { request: { method: string, url: string, httpVersion?: string, headers?: Object, body?: string }, response: { status: number, statusText: string, httpVersion?: string, headers?: Object, body?: string } }

CSS Custom Properties

Property	Default	Description
--bg-primary	#f5f5f5	Primary background color
--bg-secondary	white	Secondary background color
--border-color	#ddd	Border color
--text-primary	#1f2937	Primary text color

<http-request>

Displays just the HTTP request portion: method, URL, headers, and body.

Attributes

Attribute	Type	Description
theme	string	Color theme: "light", "dark", or "auto"
highlight	string	Sections to highlight: request-line, headers, body, or header:name
box	string	Sections to add labeled borders
show-header	boolean	Show/hide the "Request" header bar (default: true)

Properties

Property	Type	Description
data	Object	Request data: { method: string, url: string, httpVersion?: string, headers?: Object, body?: string }

<http-response>

Displays just the HTTP response portion: status line, headers, and body.

Attributes

Attribute	Type	Description
theme	string	Color theme: "light", "dark", or "auto"
highlight	string	Sections to highlight: status-line, headers, body, or header:name
box	string	Sections to add labeled borders
show-header	boolean	Show/hide the "Response" header bar (default: true)

Properties

Property	Type	Description
data	Object	Response data: { status: number, statusText: string, httpVersion?: string, headers?: Object, body?: string }

<http-waterfall>

Visualizes multiple HTTP exchanges with list, duration, and waterfall timeline views. Supports live capture and a built-in request builder.

Attributes

Attribute	Type	Description
view	string	View mode: "list", "duration", or "waterfall"
theme	string	Color theme: "light", "dark", or "auto"
capture	boolean	Enable live capture of fetch/XHR requests
filter	string	URL pattern filter for capture (supports * wildcards)
max-entries	number	Maximum number of entries to display (default: 100)
explorer	boolean	Show the request builder panel

Properties

Property	Type	Description
exchanges	Array	Array of HTTP exchanges with timing: [{ request: { method, url, headers, body }, response: { status, statusText, headers, body }, timing: { startTime, endTime, duration } }]
view	string	Get/set current view mode

Events

Event	Detail	Description
request-sent	{ method, url, headers, body }	Fired when explorer sends a request
response-received	{ request, response, timing }	Fired when explorer receives a response
request-error	{ error }	Fired when explorer request fails

Methods

Method	Description
startCapture()	Start capturing HTTP requests
stopCapture()	Stop capturing
togglePause()	Pause/resume capturing
clearExchanges()	Clear all captured exchanges
toggleExplorer()	Open/close the request builder panel

HTTPInterceptor (Utility Class)

A utility class for intercepting fetch() and XMLHttpRequest calls. Used internally by http-waterfall but can be used standalone.

Usage

import { HTTPInterceptor } from '@profpowell/http-component/http-interceptor'; const interceptor = new HTTPInterceptor(); interceptor.start((exchange) => { console.log('Captured:', exchange.request.method, exchange.request.url); }, { filter: '/api/*', maxBodySize: 1024 * 1024 }); // Later, stop intercepting interceptor.stop();

Methods

Method	Description
start(callback, options)	Start intercepting with callback and options
stop()	Stop intercepting and restore original functions
pause()	Pause forwarding to listeners
resume()	Resume forwarding to listeners
addListener(callback)	Add additional listener
removeListener(callback)	Remove a listener

Options

Option	Type	Default	Description
filter	string	null	URL pattern filter (* wildcard supported)
maxBodySize	number	1MB	Maximum body size to capture