WebhooksPro
A webhooks console with delivery history, a payload inspector and retries that roll the rate.
Webhooks
Halden signs every event and posts it to your endpoints. Failed deliveries retry on their own for three days, or you can retry them now.
Ledger sync
Added by Emma Collins on Mar 4, 2026whsec_••••7f3aAPI 2026-08-01
Recent deliveries
invoice.payment_failed
evt_GAYU3UijOD, attempt 1
{"error":"ledger_write_failed","message":"connection pool exhausted"}{ "id": "evt_GAYU3UijOD", "type": "invoice.payment_failed", "created": 1790086364, "api_version": "2026-08-01", "livemode": true, "data": { "object": { "id": "in_1Q8uXe7", "object": "invoice", "number": "FW-2026-1179", "customer": "cus_P2mZr6", "amount_due": 129900, "currency": "usd", "attempt_count": 2, "next_payment_attempt": 1790265600 } }}- A developer settings page for webhook endpoints, delivery history, and retries.
- Consoles that need a payload and headers inspector next to the delivery list.
- Use api-keys for managing tokens.
- Use audit-log for account activity rather than outgoing events.
- Use integrations for a catalogue of third-party connections.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this on a developer settings page. Load endpoints, event volume and delivery attempts from your webhook service into webhooks-data.ts and connect retry, test event and endpoint creation to your API; the preview is simulated.
import { Webhooks } from "@/registry/blocks/webhooks/webhooks"; export default function DeveloperSettings() { return ( <main> <Webhooks /> </main> );}Webhooks
A webhooks console with an endpoint list, delivery volume chart, delivery history, a payload and headers inspector, retries and an add endpoint form. Takes no props; endpoints, deliveries and payloads are sample data in webhooks-data.ts, and retries, test events and creation are simulated.
No props.
- Arrow uporArrow down
- Moves focus and selection through endpoints or deliveries.
- HomeorEnd
- Jumps to the first or last endpoint or delivery, or the first or last inspector tab.
- Arrow leftorArrow right
- Switches between the Payload and Headers tabs.
- Escape
- Closes the add endpoint panel.
- Payload and headers use a tablist with roving tabindex, and the code panel is a focusable tabpanel.
- Endpoint and delivery rows mark the current item with aria-current and point at the detail region with aria-controls.
- Form errors render with role="alert", and the add toggle exposes aria-expanded.
- Selection highlights and the active tab slide with shared layout springs; new rows grow in and flash once.
- A successful retry swaps to Resolved and the delivery rate rolls to its new value.
- Reduced motion replaces growth and rolls with instant or opacity-only changes.
- Below an 880px container the delivery list and inspector stack, and below 760px endpoint rows wrap onto two lines.
- Below 540px padding tightens and the footer stacks; inner container queries also reflow the add form, delivery rows, and headers on their own widths.
- Delivery rows are not virtualized; paginate from your webhook service for busy endpoints.
- ResizeObservers size the volume chart; there is no animation loop.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on a developer settings page for managing webhook endpoints.
- Load endpoints, event volume and delivery attempts from your webhook service into webhooks-data.ts.
- Connect retry, send test event and endpoint creation to your API, and return the real signing secret once.
The full library index for assistants is at /llms.txt.