HTTP Component

A dependency-free vanilla web component system for displaying HTTP request/response data in educational formats.

Components

• <http-transaction>: Complete request/response pair (also available as <http-console>)
• <http-request>: Standalone request display
• <http-response>: Standalone response display
• <http-waterfall>: Multiple requests with list/timeline views and built-in request builder

Installation

npm install @profpowell/http-component

Or via CDN:

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

Quick Start

Single Transaction

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

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

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

Multiple Requests (Waterfall)

<http-waterfall id="viewer" view="waterfall"></http-waterfall>

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

  document.getElementById('viewer').exchanges = [
    {
      request: { method: 'GET', url: '/api/users' },
      response: { status: 200, statusText: 'OK' },
      timing: { startTime: 0, endTime: 100, duration: 100 }
    },
    {
      request: { method: 'POST', url: '/api/users' },
      response: { status: 201, statusText: 'Created' },
      timing: { startTime: 50, endTime: 150, duration: 100 }
    }
  ];
</script>

Live Capture

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

The component will automatically capture all fetch() and XMLHttpRequest calls made by the page.

Request Builder

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

Add the explorer attribute to show a built-in request builder panel.

Features

• Wire Format Display: Shows HTTP in actual protocol format
• Syntax Highlighting: Automatic highlighting for JSON, HTML, CSS, and JavaScript
• Three View Modes: List, Duration, and Waterfall views
• Live Capture: Intercept and display real HTTP traffic
• Request Builder: Build and send HTTP requests interactively
• Theme Support: Light and dark modes with auto-detection
• Section Highlighting: Emphasize specific parts with highlight and box attributes

Attributes

Common Attributes

| Attribute | Values | Description | |-----------|--------|-------------| | theme | light, dark, auto | Color theme | | highlight | section names | Highlight specific sections | | box | section names | Add labeled borders |

http-waterfall Specific

| Attribute | Values | Description | |-----------|--------|-------------| | view | list, duration, waterfall | Display mode | | capture | true, false | Enable live capture | | filter | URL pattern | Filter captured requests | | max-entries | number | Maximum entries (default: 100) | | explorer | boolean | Show request builder |

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

# Lint and format
npm run lint
npm run format

Documentation

See the documentation site for:

• Interactive Demos
• API Reference

License

MIT