HTTP Component

Educational web components for visualizing HTTP request/response data

View Demos API Reference

Features

Wire Format Display

Show HTTP data in the actual wire format students learn in networking courses.

Syntax Highlighting

Automatic highlighting for JSON, HTML, CSS, and JavaScript content types.

Multiple Views

List, Duration, and Waterfall views for visualizing multiple requests.

Live Capture

Intercept and display real fetch() and XMLHttpRequest calls in real-time.

Request Builder

Built-in explorer for building and sending HTTP requests interactively.

Zero Dependencies

Pure vanilla JavaScript web components with no external dependencies.

Quick Start

Install via npm

npm install @profpowell/http-component

Or use via CDN

<script type="module" src="https://unpkg.com/@profpowell/http-component"></script>

Basic Usage

<http-transaction id="demo"></http-transaction>

<script type="module">
  import '@profpowell/http-component';

  document.getElementById('demo').data = {
    request: {
      method: 'GET',
      url: '/api/users',
      headers: { 'Accept': 'application/json' }
    },
    response: {
      status: 200,
      statusText: 'OK',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: 1, name: 'John' })
    }
  };
</script>

Components

<http-transaction>

Display a complete HTTP request/response pair side by side in wire format.

<http-request>

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

<http-response>

Display just the response portion: status, headers, and body.

<http-waterfall>

Visualize multiple HTTP requests with list, duration, and waterfall views.