✦ Preact Dev Webhook Replayer

A local webhook operations desk for inspecting payloads, generating HMAC signatures, querying JSONPath, and rehearsing deliveries.

---

✨ Highlights

• Delivery Inbox: Searches webhook events and filters delivered, failed, and pending states.
• Payload Workspace: Edits JSON payloads in CodeMirror and reports parse errors before replay.
• JSONPath Inspector: Runs real JSONPath expressions against the current event payload.
• HMAC Signing: Uses the browser Web Crypto API to generate SHA-256 webhook signatures.
• Header Editing: Adds, renames, updates, and removes request headers before a replay.
• Environment Targets: Switches between local, staging, and deliberate failure-sandbox destinations.
• Replay Simulation: Produces deterministic local success or failure attempts without issuing external requests.
• Attempt Timeline: Records status, response, duration, target, and timestamp for each replay.
• Validated Persistence: Validates sample and IndexedDB data with Zod and provides a full reset.
• Responsive Workflow: Separates inbox and event detail on mobile while preserving both panes on desktop.

🧱 Project Structure

public/
|-- favicon.svg
`-- sample-webhooks.json
src/
|-- app.tsx
|-- main.tsx
|-- index.css
|-- components/
|   |-- attempt-timeline.tsx
|   |-- event-list.tsx
|   |-- json-editor.tsx
|   |-- replay-workspace.tsx
|   `-- workspace-state.tsx
|-- domain/
|   `-- webhooks.ts
`-- services/
    `-- webhook-store.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• CodeMirror with JSON language support
• jsonpath-plus
• Web Crypto API
• zod
• idb-keyval
• @preact/signals
• lucide-preact

📦 Included Sample Data

public/sample-webhooks.json includes billing, fulfillment, identity, and deployment events with editable headers, nested payloads, delivery history, and three simulated destinations.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Replay is intentionally simulated in the browser. No request is sent to the displayed destination URL.
• The failure sandbox always returns a simulated 503; other destinations return a simulated success with payload-dependent timing.
• The signing secret and generated signature remain in the current browser workspace.
• Replace the replay function with a protected server endpoint before targeting real webhook destinations; direct browser delivery is constrained by CORS and would expose credentials.
• IndexedDB stores edited events and attempts locally. The restore control returns to the bundled fixture.
• The UI is responsive and uses explicit inbox/detail navigation on narrow screens.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a Vite-ready vercel.json with SPA rewrites.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.