A client-side webhook viewer and inspector — no server required.
Paste, parse, filter, and inspect webhook payloads right in your browser.

✨ Features

• 📥 Paste JSON payloads — auto-validates and pretty-prints any JSON you paste
• 📋 Header editor — add/edit/remove HTTP headers to simulate real webhook delivery
• 🔍 Search & filter — full-text search across payloads, headers, and paths
• 💾 Persistent history — all webhooks saved in localStorage, survives page reloads
• 🎨 Dark theme — eye-friendly dark UI with orange accent, fully customizable via CSS vars
• 📱 Responsive — works beautifully on desktop, tablet, and mobile
• ⚡ Zero dependencies — no frameworks, no build tools, no npm. Just a single HTML file.
• 🚀 GitHub Pages ready — deploy by pushing to any repo with Pages enabled

🚀 Quick Start

Option 1: Use GitHub Pages (live)

Visit https://soumendrak.github.io/webhook-inspector/

Option 2: Open locally

git clone https://github.com/soumendrak/webhook-inspector.git
cd webhook-inspector
open index.html   # or double-click in your file manager

That's it. No server, no install, no build step.

🖥️ Usage

1. Paste a JSON payload in the left panel — the app validates it in real time
2. Add or edit headers to simulate what a real webhook provider would send
3. Click "Simulate Webhook" — the payload appears in the history panel on the right
4. Click any history entry to inspect headers and body in a detail view
5. Search history using the search box to find specific payloads
6. Clear history with the "Clear" button in the header bar

Preset examples

Click any preset button to load a sample payload:

🎨 Customization

The app uses CSS custom properties for theming. Override them in your browser's dev tools or fork and edit:

:root {
  --bg: #0f0f1a;      /* page background */
  --surface: #1a1a2e;  /* card/surface background */
  --accent: #ff6b35;   /* accent color */
  --text: #e0e0e0;     /* text color */
  --border: #2a2a3e;   /* border color */
}

To add more preset payloads, edit the presets section in index.html — add a new <button data-preset="mypreset"> and a matching case in the JavaScript.

📸 Screenshot

Replace the screenshot link above with an actual screenshot of the app in action.

🧱 Architecture

webhook-inspector/
├── index.html    # Single-file app (HTML + CSS + JS)
├── LICENSE       # MIT License
└── README.md     # This file

Everything is in one file. The app uses:

• localStorage for persistent webhook history
• CSS Grid/Flexbox for responsive layout
• CSS custom properties for theming
• No external dependencies whatsoever

🤝 Contributing

PRs are welcome! If you'd like to add features, fix bugs, or improve the docs:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing)
3. Commit your changes (git commit -am 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing)
5. Open a Pull Request

📄 License

This project is MIT licensed. Use it freely in personal and commercial projects.

Built with ❤️ and vanilla JavaScript.