# Log View

> Monospace output: LogView for logs with line numbers and levels, CodeViewer for JSON, YAML and code.

Component · Foundations · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/LogView/)

Monospace output: `LogView` for logs with line numbers and levels, `CodeViewer` for JSON, YAML and code.

LogView: `lines` (strings or {time, text, level: "ok" | "warn" | "err" | "hl", fresh}), `title`, `right`, `numbers` (false hides them), `follow` (default true: sticks to the newest line unless the pointer is over it), `maxHeight`.
CodeViewer: `value` (string or object, pretty-printed as JSON), `lang`. Built on CodeBlock with copy.

## Example

```tsx
import { CodeViewer, LogView } from "@twentyfirstmedia/pro";
import type { LogLine } from "@twentyfirstmedia/pro";

const lines: LogLine[] = [
  {
    time: "09:41:02",
    text: "pull  ghcr.io/halo/web:8f2a91c",
    level: "hl",
  },
  {
    time: "09:41:09",
    text: "build  146 modules transformed",
  },
  {
    time: "09:41:22",
    text: "test   146 passed, 0 failed",
    level: "ok",
  },
  {
    time: "09:41:23",
    text: "warn   bundle is 512 kB, above the 500 kB budget",
    level: "warn",
  },
  {
    time: "09:41:30",
    text: "health GET /v1/health → 503",
    level: "err",
  },
];
export default function Preview() {
  return (
    <div
      className="tf-col"
      style={{
        gap: 16,
      }}
    >
      <LogView title="deploy #482" lines={lines} />
      <CodeViewer
        value={{
          tool: "cloudflare.dns",
          action: "create",
          record: {
            type: "TXT",
            name: "ops-test",
            ttl: 300,
          },
        }}
      />
    </div>
  );
}
```

## Props

### CodeViewer

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string \| object` | Required |
| `lang?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### LogView

| Prop | Type | Notes |
| --- | --- | --- |
| `lines` | `LogLine[]` | Required |
| `title?` | `ReactNode` |  |
| `right?` | `ReactNode` |  |
| `numbers?` | `boolean` |  |
| `follow?` | `boolean` |  |
| `maxHeight?` | `number` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |