Demos - HTTP Component

HTTP Transaction (Request + Response)

A complete HTTP exchange showing both request and response in wire format.

<http-transaction id="demo"></http-transaction> <script> document.getElementById('demo').data = { request: { method: 'GET', url: '/api/users/123', httpVersion: 'HTTP/1.1', headers: { 'Host': 'api.example.com', 'Accept': 'application/json', 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIs...' } }, response: { status: 200, statusText: 'OK', httpVersion: 'HTTP/1.1', headers: { 'Content-Type': 'application/json', 'Content-Length': '94' }, body: JSON.stringify({ id: 123, name: 'John Doe', email: 'john@example.com' }, null, 2) } }; </script>

Request Only

Display just the request portion with method coloring and header highlighting.

<http-request id="req"></http-request> <script> document.getElementById('req').data = { method: 'POST', url: '/api/users', httpVersion: 'HTTP/1.1', headers: { 'Host': 'api.example.com', 'Content-Type': 'application/json', 'Authorization': 'Bearer token...' }, body: JSON.stringify({ name: 'Jane Smith', email: 'jane@example.com' }, null, 2) }; </script>

Response Only

Display just the response with status code coloring and JSON body highlighting.

<http-response id="res"></http-response> <script> document.getElementById('res').data = { status: 201, statusText: 'Created', httpVersion: 'HTTP/1.1', headers: { 'Content-Type': 'application/json', 'Location': '/api/users/124' }, body: JSON.stringify({ id: 124, name: 'Jane Smith', createdAt: '2025-01-17T10:00:00Z' }, null, 2) }; </script>

JSON Body Highlighting

JSON responses are automatically parsed and syntax highlighted.

<http-transaction id="demo"></http-transaction> <script> document.getElementById('demo').data = { request: { method: 'GET', url: '/api/products', headers: { 'Accept': 'application/json' } }, response: { status: 200, statusText: 'OK', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ products: [ { id: 1, name: 'Widget', price: 29.99, inStock: true }, { id: 2, name: 'Gadget', price: 49.99, inStock: false } ], total: 2, page: 1 }, null, 2) } }; </script>

HTML Response

HTML content with tag, attribute, and value highlighting.

<http-transaction id="demo"></http-transaction> <script> document.getElementById('demo').data = { request: { method: 'GET', url: '/index.html', headers: { 'Accept': 'text/html' } }, response: { status: 200, statusText: 'OK', headers: { 'Content-Type': 'text/html; charset=utf-8' }, body: '<!DOCTYPE html>\n<html>\n <body><h1>Hello</h1></body>\n</html>' } }; </script>

CSS Response

CSS with selector, property, and value highlighting.

<http-transaction id="demo"></http-transaction> <script> document.getElementById('demo').data = { request: { method: 'GET', url: '/styles/main.css', headers: { 'Accept': 'text/css' } }, response: { status: 200, statusText: 'OK', headers: { 'Content-Type': 'text/css' }, body: '.container { max-width: 1200px; margin: 0 auto; }' } }; </script>

JavaScript Response

JavaScript with keyword, string, and comment highlighting.

<http-transaction id="demo"></http-transaction> <script> document.getElementById('demo').data = { request: { method: 'GET', url: '/js/app.js', headers: { 'Accept': '*/*' } }, response: { status: 200, statusText: 'OK', headers: { 'Content-Type': 'application/javascript' }, body: 'const API_URL = "https://api.example.com";\n\nasync function fetchData(id) {\n const res = await fetch(`${API_URL}/users/${id}`);\n return res.json();\n}' } }; </script>

Error Response (404)

Error status codes are highlighted in red/orange colors.

<http-transaction id="demo"></http-transaction> <script> document.getElementById('demo').data = { request: { method: 'GET', url: '/api/users/999', headers: { 'Accept': 'application/json' } }, response: { status: 404, statusText: 'Not Found', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ error: 'User not found', code: 'USER_NOT_FOUND' }, null, 2) } }; </script>

Waterfall View

Multiple requests visualized with timing. Toggle between List, Duration, and Waterfall views.

<http-waterfall id="wf" view="waterfall"></http-waterfall> <script> document.getElementById('wf').exchanges = [ { request: { method: 'GET', url: '/api/user/profile', headers: {} }, response: { status: 200, statusText: 'OK', headers: {}, body: '{}' }, timing: { startTime: 0, endTime: 87, duration: 87 } }, { request: { method: 'GET', url: '/api/user/posts', headers: {} }, response: { status: 200, statusText: 'OK', headers: {}, body: '[]' }, timing: { startTime: 20, endTime: 176, duration: 156 } } ]; </script>

Live HTTP Capture

Capture real HTTP requests made by the page. Click the buttons to make test API calls.

The viewer below captures all fetch() and XMLHttpRequest calls. Try the buttons to see requests appear in real-time!

Test API Calls

<http-waterfall capture="true" max-entries="20"></http-waterfall>

Page Load (Resource Timing)

List every request this page itself made: the document, its stylesheet, its scripts, and anything they pulled in. The data comes from the browser's Resource Timing API, so it covers requests made by HTML and CSS, which live capture cannot see.

Each bar is split into phases: queued, DNS, connect, TLS, waiting, and download. Hover a bar for sizes and cache state. Reload the page and the sizes change to cache or revalidated. Rows from other origins show sizes only if that server sends Timing-Allow-Origin.

<http-waterfall resources></http-waterfall>

Request Builder (Explorer)

Build and send custom HTTP requests interactively. The explorer is built into http-waterfall.

<http-waterfall explorer></http-waterfall>

Highlighting Sections

Use the highlight attribute to emphasize specific parts of the request/response.

<http-transaction highlight="request-line,response-body"> </http-transaction>

Bordered Sections

Use the box attribute to add labeled borders around sections.

<http-transaction box="request-headers,response-body"> </http-transaction>

Interactive Demos