Webhook Payload Viewer

About Webhook Payload Viewer

This webhook payload viewer pretty prints JSON webhook events and flattens nested object keys into readable dot-notation paths for easier inspection and documentation.

It is useful for webhook debugging, API integration testing, event payload inspection, generating type definitions, documenting webhook structures for team reference, and understanding the complete field hierarchy of complex nested payloads from services like GitHub, Stripe, and Slack.

Webhook Payload Structure

Most webhook providers follow a consistent structure with event metadata and a data object:

{
  "id": "evt_123456",           // Unique event ID
  "event": "user.created",      // Event type
  "created_at": 1234567890,     // Unix timestamp
  "data": {                     // Resource data
    "id": "usr_789",
    "email": "[email protected]",
    "profile": { ... }
  }
}

Common Webhook Providers

JSON Flattening Algorithm

The flattening process converts nested objects into dot-notation paths:

// Flattening examples:
Input:  { data: { user: { email: "[email protected]" } } }
Output: data.user.email: [email protected]

Input:  { items: [{ name: "A" }, { name: "B" }] }
Output: items[0].name: A
        items[1].name: B

// Recursive traversal:
function flatten(value, prefix, output) {
  if (Array.isArray(value)) {
    value.forEach((item, i) => flatten(item, `${prefix}[${i}]`, output))
  } else if (value && typeof value === "object") {
    Object.keys(value).forEach(key =>
      flatten(value[key], prefix ? `${prefix}.${key}` : key, output)
    )
  } else {
    output.push(`${prefix}: ${String(value)}`)
  }
}

Webhook HTTP Headers

Webhook requests include headers for verification and routing:

Common Use Cases

• Webhook debugging: Inspect actual payload structure during development
• API integration: Understand field paths before writing parser code
• Documentation: Generate field reference docs for team wikis
• Type generation: Create TypeScript interfaces from sample payloads
• Testing: Verify webhook payloads match expected schemas
• Support troubleshooting: Analyze customer webhook delivery issues

Webhook Security Considerations

• Signature verification: Always verify HMAC signatures to confirm sender identity
• HTTPS only: Webhook endpoints must use HTTPS to encrypt payloads in transit
• Replay protection: Check event IDs or timestamps to prevent replay attacks
• Rate limiting: Implement rate limits to handle burst traffic from webhook storms
• Idempotency: Design handlers to safely process duplicate deliveries

Payload Inspection Tips

• Start with root-level keys to identify the event type and structure
• Use flattened paths to quickly locate deeply nested fields
• Compare multiple payloads to identify variable vs constant fields
• Look for timestamp fields to understand event ordering
• Check for nested objects that may contain related resource data