Event Catalog Browser

PreviousNext

Grouped event types with descriptions and schema-derived sample payloads.

user.created

v1

A user signed up.

Sample payload

{
  "id": "string",
  "email": "string",
  "plan": "string"
}
"use client";

import { EventCatalogBrowser } from "@/components/event-catalog-browser";

Installation

pnpm dlx shadcn@latest add @repost/event-catalog-browser

Installs this item, every component it depends on, and the npm packages listed below.

Usage

This component is presentational: it renders what you pass it and calls back on interaction. In a live dashboard the data comes from useEventTypes() + useSendSampleEvent() (@repost/portal-react), but any data of the same shape works.

components/event-catalog-browser-demo.tsx
"use client";

import { EventCatalogBrowser } from "@/components/event-catalog-browser";

export function EventCatalogBrowserDemo() {
  return (
    <EventCatalogBrowser
      eventTypes={[
        {
          id: "evt_1",
          name: "user.created",
          version: 1,
          description: "A user signed up.",
          jsonSchema: {
            type: "object",
            properties: { id: { type: "string" }, email: { type: "string" }, plan: { type: "string" } },
          },
        },
        {
          id: "evt_2",
          name: "user.deleted",
          version: 1,
          description: "A user closed their account.",
          jsonSchema: { type: "object", properties: { id: { type: "string" } } },
        },
        {
          id: "evt_3",
          name: "invoice.paid",
          version: 2,
          description: "An invoice settled.",
          jsonSchema: {
            type: "object",
            properties: { amountCents: { type: "number" }, currency: { type: "string" } },
          },
        },
      ]}
      onSendSample={() => undefined}
    />
  );
}

Props

PropTypeDescription
eventTypesCatalogEventType[]Event types with JSON Schemas.
onSendSample(eventType, sample) => voidRenders a send-test button.
sendingEventTypeId`stringnull`