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`