shadcn.io is not affiliated with official shadcn/ui
Webhook Manager CRUD Block for Svelte
An events platform's webhook endpoints with a two-step Add endpoint form (name and https URL, then grouped events), masked signing secrets that can be rolled, a switch that pauses delivery, a test event and a Delete with Undo.
Installation
Overview
Register where events are delivered and keep each endpoint under control, with this webhook manager for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a frame of fixed height with five endpoints. Each row shows the name, the URL in mono, the events it hears, a signing secret that is masked with only its last two characters visible, and a Switch that pauses delivery. Roll secret changes the visible ending, Send test event answers in the row that the test event is shown here and nothing was sent, and Delete leaves an Undo line in the foot. The header's Add endpoint button opens an inset form over the list that takes two steps, with a bar showing where you are: first a name and a URL (https only, no localhost, and an Input refuses a URL that is already added), then the events as grouped Checkboxes for order.*, customer.* and invoice.*, at least one. Create endpoint is the only Shine Button; emptying the list shows an Empty state without the frame changing height. For events platforms, payment providers and any product that calls its customers' servers.
FAQ
How do I fill it with my endpoints?
Edit HOOKS and GROUPS. An endpoint has an id, a name, a url, a list of events, a paused flag and a tail, the last two characters of its secret. Groups list the events a form offers. The active count and the idle sentence are derived from the list.
Is the signing secret ever shown in full?
No. The row prints a fixed prefix, four hidden dots (hidden from screen readers too, who hear that the secret is hidden) and the last two characters. Roll secret only changes that ending in this demo. In your app, return a new secret once from the roll call, show it in a dialog with a Copy button, and keep this list to the masked form.
Which URLs are accepted?
The text must parse as a full URL, its scheme must be https, its host must not be localhost, a loopback address or a .local name, and it must not match an existing endpoint's URL, ignoring case and a trailing slash. Each refusal names its reason under the field, and Next stays on step 1 until the name and URL pass.
How do the two steps work?
Step 1 asks for the name and URL; Next checks them and moves to step 2, where at least one event must be ticked before Create endpoint works. Back returns to step 1 with your input kept, Escape or Cancel closes the form and returns focus to Add endpoint, and Enter submits the current step.
What stays local, and how do I wire real delivery?
The endpoints live in React state in this tab and a reload brings the original five back; nothing is delivered and the test event is only a line in the row. In your app call your platform from create, pause, roll, test and remove, and show the delivery result where the test line is.