shadcn.io is not affiliated with official shadcn/ui
Webhook Deliveries Dashboard Block for Vue
A log of eight webhook deliveries with the request and response as JSON trees, the attempts with their retry waits, and a Resend that turns a failed delivery into a delivered one.
Installation
Overview
Read what you sent and what came back with this delivery log for Vue with Ark UI. A hairline frame with a plus mark on each corner puts eight Hookbench deliveries in a list at the start, each with its event in mono, the endpoint host, the status code with its word and the round trip in milliseconds. Beside it, the chosen delivery opens in Tabs: Request shows the payload as a JSON Tree View with a Copy Button, Response shows what the endpoint answered, and Attempts lists every try with the wait before the next. A delivery that failed offers Resend in the foot; pressing it adds a 200 attempt and flips the row to Delivered, and the count in the header follows. It's built from Tabs, JSON Tree View, Badge, Shine Button and Guides. For developer consoles and webhook support tools.
FAQ
How do I fill it with my deliveries?
Edit DELIVERIES: the event, the host and path, the code and round trip, the object id and amount that fill the request body, and an attempts list with each try's time, code and retry wait. The request is built from those fields and the response from the status code, so neither is typed twice.
What does Resend do?
On a failed delivery it adds a 200 attempt, turns the row and the badge to Delivered and raises the delivered count. On one that already arrived it answers that there is nothing to resend. Nothing is sent: the demo says so in the status line.
Why are status codes shown as words?
A colour alone cannot carry a status, so each code is printed with its word (Delivered, Rate limited, Server error, Timed out) in the list and in the detail.
What stays local, and how do I wire it for real?
The deliveries, payloads and the resent state live in the page, and Copy writes the payload to your clipboard. To wire it up, load a page of deliveries from your event store and call your resend endpoint from resend, then replace the attempt list with the response.