@logstitch/viewer

Embeddable audit log viewer component for LogStitch. Drop a fully-featured event log into your app with a single React component.

Install

npm install @logstitch/viewer

Quick Start

import { LogViewer } from '@logstitch/viewer';

function AuditLogPage({ viewerToken }: { viewerToken: string }) {
  return (
    <LogViewer
      token={viewerToken}
      theme="dark"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | token | string | required | Viewer token (vt_...) from the API | | baseUrl | string | https://api.logstitch.io | API base URL | | theme | 'light' \| 'dark' \| Theme | 'light' | Color theme | | pageSize | number | 25 | Events per page | | onError | (error: Error) => void | — | Error callback |

Generating Viewer Tokens

Use the LogStitch SDK or API to create a viewer token scoped to a tenant:

import { LogStitch } from '@logstitch/sdk';

const client = new LogStitch({ projectKey: 'pk_...' });
const { token } = await client.viewerTokens.create({
  tenant_id: 'tenant_abc',
});
// Pass `token` to your frontend

Custom Themes

Pass a theme object to customize colors:

<LogViewer
  token={viewerToken}
  theme={{
    bg: '#1a1a2e',
    text: '#eaeaea',
    accent: '#e94560',
    border: '#333',
  }}
/>

See Theme type for all available properties.

Features

• Filter by action, category, date range, and search text
• Click rows to expand full event detail (actor, target, context, metadata, changes)
• CSV export
• Cursor-based pagination with "Load more"
• Loading skeleton, empty state, and error states with retry
• Light and dark themes with full customization
• Zero runtime dependencies (React is a peer dependency)
• ESM and CJS dual output

License

MIT