Interactive Demos
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.
<!-- Set Content-Type to text/html for automatic HTML 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.
<!-- Set Content-Type to text/css for automatic CSS 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.
<!-- Set Content-Type to application/javascript for JS 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>
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>