shadcn.io is not affiliated with official shadcn/ui
Webhook Setup Onboarding Block for Svelte
A first webhook endpoint with an https address check, an All events box that turns mixed, a Send test button that shows the sample payload in a JSON tree and adds a row to a delivery log, and a Save that waits for a 200.
Installation
Overview
Let people see a delivery work before they save the endpoint, with this webhook step for Svelte with Ark UI. It is a step of Relaywick, a form-handling service, as a whole screen: the page's rails and one band, a step header (“Step 5 of 6” and a hairline) and a framed panel in two halves. At the start an address field (https, public host) and three events under an “All events” Checkbox that turns mixed when only some are on. At the end the sample payload in a JSON Tree View and a small table of deliveries (event, status, time). Send test plays a delivery and adds a row; the answer comes from the address (a path ending in /fail answers 500, one ending in /missing answers 404, anything else 200). Save endpoint is the one Shine Button and wakes after a 200 for the address and events as they stand. Simulated in this demo: no request is made.
FAQ
How does the demo decide the answer?
codeOf reads the end of the address: /fail gives 500, /missing gives 404 and everything else 200, with typed times (“0.4 s”, “0.2 s”, “1.2 s”). The line under the panel says what the endpoint answered. In your app replace the body of test with a request from your server to the address, and show the real status code and time.
Why is Save quiet at first?
Save endpoint is quiet until a test has passed for the address and events exactly as they are. Edit either and the pass is gone, so you never save something that wasn't tested. Pressing it early still answers, in the status line, instead of doing nothing.
How does the All events box work?
It is checked when every event is on, empty when none is, and mixed in between; pressing it turns all on, or all off from the mixed state. The count beside it (“1 of 3”) follows. Each event shows its name and the identifier your server will receive, always left to right.
Where does the sample payload come from?
payloadOf builds a made-up body for the event that was tested: an id, the event name, a timestamp and a form with a sample person. It is shown in the tree so people can see the shape before they write a handler. Replace it with your real payload type.
What stays local in the demo, and how do I wire it?
No request is made: the answer is typed from the address and the log is held in the page. In your app, register the address and events with your server where submit says so, sign each delivery and show how to verify the signature, and let the log show real deliveries.