Webhooks Manager

Code

import { WebhooksManager, type WebhookEndpoint, type WebhookEvent } from "@fadymondy/nasaq/web";declare const events: WebhookEvent[];declare const endpoints: WebhookEndpoint[];declare const api: { save(input: unknown): Promise<{ secret?: string }>; remove(id: string): Promise<void> };export function Webhooks() {  return <WebhooksManager events={events} endpoints={endpoints} onSaveEndpoint={(input) => api.save(input)} onDeleteEndpoint={(id) => api.remove(id)} />;}

Developer Tools · beta

Live examples and controls: Webhooks Manager in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/webhooks-manager.json

One place for webhooks. It has no backend: your callbacks call the API and you pass the updated data back.

• Endpoints: name, URL, channel as plain text (no logos), events, enabled, masked secret and last delivery. The row menu (also the context menu) offers Send test, Edit, Rotate secret and Delete. The form checks that the URL is https (plain http only for localhost) and that at least one event is picked; events are grouped with a select-all per group.
• Signing secret: returned by onSaveEndpoint or onRotateSecret as { secret } and shown once in a dialog with a copy field and a snippet that verifies the X-Signature header. After the dialog closes the UI keeps only the last four characters.
• Deliveries: filter by endpoint and status, open a delivery for its request, response and error, and send a finished one again.
• Inbound: sources with an editable poll interval, last status (healthy, failing, late) and Poll now.
• Push endpoint: pass pushEndpoint and a card shows the URL and token once. onDismissPush closes it and you stop passing it.

When to useCopy Anchor Link

• A developer settings page for outgoing and incoming integrations.

When not to useCopy Anchor Link

• Full API key management: use ApiKeys.

ImportCopy Anchor Link

import { WebhooksManager } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { WebhooksManager, type WebhookEndpoint, type WebhookEvent } from "@fadymondy/nasaq/web";

declare const events: WebhookEvent[];
declare const endpoints: WebhookEndpoint[];
declare const api: { save(input: unknown): Promise<{ secret?: string }>; remove(id: string): Promise<void> };

export function Webhooks() {
  return <WebhooksManager events={events} endpoints={endpoints} onSaveEndpoint={(input) => api.save(input)} onDeleteEndpoint={(id) => api.remove(id)} />;
}

APICopy Anchor Link

WebhooksManager takes the div props except children and title, plus:

AccessibilityCopy Anchor Link

Tables are labelled, the enabled switch and the interval select name their endpoint, and destructive actions use an alert dialog.

RTL and languagesCopy Anchor Link

English and Arabic, overridable with labels. URLs, event ids, codes and secrets stay left to right.