Logs, JSON, and diffs

Inspect streaming logs, expandable structured values, and line-oriented changes in terminal-bounded viewports.

Overview

Inspect streaming logs, expandable structured values, and line-oriented changes in terminal-bounded viewports.

Installation

npx @mwillbanks/tuil add log-viewer json-viewer diff-viewer markdown-viewer code-viewer timeline bar-chart structured-content rich-diff-viewer

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

API	Signature	Description
`LogViewer`	`function LogViewer`	Public function LogViewer.
`JsonViewer`	`function JsonViewer`	Public function JsonViewer.
`flattenJson`	`function flattenJson`	Public function flattenJson.
`DiffViewer`	`function DiffViewer`	Public function DiffViewer.
`createLineDiff`	`function createLineDiff`	Public function createLineDiff.
`MarkdownViewer`	`function MarkdownViewer`	Public function MarkdownViewer.
`CodeViewer`	`function CodeViewer`	Public function CodeViewer.
`Timeline`	`function Timeline`	Public function Timeline.
`BarChart`	`function BarChart`	Public function BarChart.
`StructuredContentSummary`	`function StructuredContentSummary`	Public function StructuredContentSummary.
`RichDiffViewer`	`function RichDiffViewer`	Public function RichDiffViewer.

Interaction

Viewers scroll and filter; JSON nodes expand or collapse; diff output remains deterministic in static mode.

API and events

LogViewer reports follow state; JSON expansion can be controlled; pure transformation helpers emit nothing.

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Documentation flow diagram. props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3

Example

import type { ComponentProps } from "react";
import { LogViewer } from "@/components/tuil/data-display/log-viewer";

export function Example(props: ComponentProps<typeof LogViewer>) {
  return <LogViewer {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.