# @mwillbanks/tuil-log-viewer

Source: /tuil/docs/reference/packages/log-viewer
Locale: en

Virtualized searchable themed log viewer models and terminal component projections for tuil.



## Overview [#overview]

Virtualized searchable themed log viewer models and terminal component projections for tuil.

`@mwillbanks/tuil-log-viewer` is independently installable and also participates in the
umbrella `@mwillbanks/tuil` runtime where applicable.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @mwillbanks/tuil-log-viewer
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mwillbanks/tuil-log-viewer
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mwillbanks/tuil-log-viewer
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mwillbanks/tuil-log-viewer
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## How it operates [#how-it-operates]

The log viewer combines normalized records, typed queries, editor input, scrolling, selection, details, timelines, tables, themes, saved searches, copy, and export.

<Mermaid
  chart="flowchart LR
  S0[&#x22;attach pipeline&#x22;]
  S1[&#x22;ingest&#x22;]
  S2[&#x22;filter/follow&#x22;]
  S3[&#x22;inspect&#x22;]
  S4[&#x22;export&#x22;]
  S0 --> S1
  S1 --> S2
  S2 --> S3
  S3 --> S4"
/>

## API [#api]

| API                                                                                         | Signature                    | Description                        |
| ------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------- |
| [`createLogTheme`](/tuil/docs/reference/packages/log-viewer/api/create-log-theme)                | `function createLogTheme`    | Public function createLogTheme.    |
| [`defaultLogThemes`](/tuil/docs/reference/packages/log-viewer/api/default-log-themes)            | `constant defaultLogThemes`  | Public constant defaultLogThemes.  |
| [`LiveIndicator`](/tuil/docs/reference/packages/log-viewer/api/live-indicator)                   | `function LiveIndicator`     | Public function LiveIndicator.     |
| [`LogDensity`](/tuil/docs/reference/packages/log-viewer/api/log-density)                         | `type LogDensity`            | Public type LogDensity.            |
| [`LogDetail`](/tuil/docs/reference/packages/log-viewer/api/log-detail)                           | `function LogDetail`         | Public function LogDetail.         |
| [`LogExportDialog`](/tuil/docs/reference/packages/log-viewer/api/log-export-dialog)              | `function LogExportDialog`   | Public function LogExportDialog.   |
| [`LogFacetPanel`](/tuil/docs/reference/packages/log-viewer/api/log-facet-panel)                  | `function LogFacetPanel`     | Public function LogFacetPanel.     |
| [`LogFilterBar`](/tuil/docs/reference/packages/log-viewer/api/log-filter-bar)                    | `function LogFilterBar`      | Public function LogFilterBar.      |
| [`LogRow`](/tuil/docs/reference/packages/log-viewer/api/log-row)                                 | `function LogRow`            | Public function LogRow.            |
| [`LogRowView`](/tuil/docs/reference/packages/log-viewer/api/log-row-view)                        | `interface LogRowView`       | Public interface LogRowView.       |
| [`LogSearchBar`](/tuil/docs/reference/packages/log-viewer/api/log-search-bar)                    | `function LogSearchBar`      | Public function LogSearchBar.      |
| [`LogSourceBadge`](/tuil/docs/reference/packages/log-viewer/api/log-source-badge)                | `function LogSourceBadge`    | Public function LogSourceBadge.    |
| [`LogTheme`](/tuil/docs/reference/packages/log-viewer/api/log-theme)                             | `interface LogTheme`         | Public interface LogTheme.         |
| [`logThemeTextStyle`](/tuil/docs/reference/packages/log-viewer/api/log-theme-text-style)         | `function logThemeTextStyle` | Public function logThemeTextStyle. |
| [`LogThemeVariant`](/tuil/docs/reference/packages/log-viewer/api/log-theme-variant)              | `type LogThemeVariant`       | Public type LogThemeVariant.       |
| [`LogTimeline`](/tuil/docs/reference/packages/log-viewer/api/log-timeline)                       | `function LogTimeline`       | Public function LogTimeline.       |
| [`LogViewer`](/tuil/docs/reference/packages/log-viewer/api/log-viewer)                           | `function LogViewer`         | Public function LogViewer.         |
| [`LogViewerModel`](/tuil/docs/reference/packages/log-viewer/api/log-viewer-model)                | `class LogViewerModel`       | Public class LogViewerModel.       |
| [`LogViewerModelOptions`](/tuil/docs/reference/packages/log-viewer/api/log-viewer-model-options) | `type LogViewerModelOptions` | Public type LogViewerModelOptions. |
| [`LogViewerProps`](/tuil/docs/reference/packages/log-viewer/api/log-viewer-props)                | `interface LogViewerProps`   | Public interface LogViewerProps.   |
| [`ParseErrorRow`](/tuil/docs/reference/packages/log-viewer/api/parse-error-row)                  | `function ParseErrorRow`     | Public function ParseErrorRow.     |
| [`StructuredValue`](/tuil/docs/reference/packages/log-viewer/api/structured-value)               | `function StructuredValue`   | Public function StructuredValue.   |
| [`TraceContext`](/tuil/docs/reference/packages/log-viewer/api/trace-context)                     | `function TraceContext`      | Public function TraceContext.      |

## Events and lifecycle [#events-and-lifecycle]

Viewer state changes are subscriptions over logging, editor, and scroll models.

All subscriptions and registrations return a disposer or belong to an owning
runtime that disposes them in reverse order.

## Example [#example]

```tsx
import { LogViewerModel } from "@mwillbanks/tuil-log-viewer";

const viewer = new LogViewerModel(pipeline, { queryEditor: app.createEditorSession({ id: "log-query" }), queryEditorOwnership: "owned" });
```

## Related [#related]

* [Package architecture](/tuil/docs/concepts/packages)
* [Events](/tuil/docs/concepts/events)
* [Testing](/tuil/docs/guides/testing)