# AiJsonView
**Also known as:** JsonViewer
## Description
BitAiJsonView renders a JSON value as a collapsible tree, colored by the kind of each value. It is what the AI components fall back to wherever they hold structured data and no better renderer: tool arguments, tool results, structured output. Containers below a depth, and containers too large to read at a glance, start collapsed, so a thousand-row result does not push the conversation off the screen. Every container's head is a button that toggles it, and a node is told apart by its path from the root, so toggling one never toggles another.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitAiJsonViewClassStyles?` | null | Custom CSS classes for different parts of the JSON view. |
| DefaultExpandDepth | `int` | 2 | How many levels of the tree are expanded before the containers below them start collapsed: 0 starts the root collapsed. A container the user toggled keeps the state they gave it when this changes; the ones nobody touched follow the new depth. |
| LargeContainerSize | `int` | 24 | The number of entries past which an object or an array starts collapsed whatever its depth, so a long result costs one row until it is opened. |
| Styles | `BitAiJsonViewClassStyles?` | null | Custom CSS styles for different parts of the JSON view. |
| Value | `JsonElement?` | null | The JSON value to render: an object or an array as a collapsible container, anything else as a single row. Nothing is rendered inside the view while it is null. A partial payload repaired by BitAiPartialJson.TryParse renders as far as it has arrived. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitAiJsonViewClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAiJsonView. |
| Row | `string?` | null | Custom CSS classes/styles for every row of the BitAiJsonView: the head of a container, the row of its closing brace and the row of a scalar. |
| Toggle | `string?` | null | Custom CSS classes/styles for the toggle buttons that expand and collapse the containers of the BitAiJsonView. |
| ToggleIcon | `string?` | null | Custom CSS classes/styles for the chevron icon of the toggle buttons of the BitAiJsonView. |
| Group | `string?` | null | Custom CSS classes/styles for the indented group of the entries of an open container of the BitAiJsonView. |
| Key | `string?` | null | Custom CSS classes/styles for the property keys of the BitAiJsonView. |
| String | `string?` | null | Custom CSS classes/styles for the string values of the BitAiJsonView. |
| Number | `string?` | null | Custom CSS classes/styles for the number values of the BitAiJsonView. |
| Boolean | `string?` | null | Custom CSS classes/styles for the true and false values of the BitAiJsonView. |
| Null | `string?` | null | Custom CSS classes/styles for the null values of the BitAiJsonView. |
### BitAiPartialJson Properties
A static class that parses JSON still being written - the payload a model streams a few characters at a time - which is what lets a tree, a table or a form fill in as it arrives rather than all at once at the end. The repair closes the open containers, drops an incomplete trailing key or literal, and keeps a string still being written, so a text grows character by character; it never invents data: every value in the result was in the input.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| TryParse(json) | `JsonElement?` | | Parses JSON that may be truncated, repairing it first when it does not parse as it is. Null for null or blank text, and for text no repair makes valid. |
| TryParseComplete(json) | `JsonElement?` | | Parses complete JSON only, returning null rather than throwing on invalid (or null or blank) text. |
| Repair(json) | `string?` | | Repairs truncated JSON text into the closest valid document, for an app that keeps the text rather than the element; null when nothing usable has arrived yet. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-AiJsonView-font-size` | var(--bit-tpg-fs-sm) | Size of the text of the tree, set in the monospaced font of the theme. |
| `--bit-AiJsonView-line-height` | 1.5 | Height of a row. |
| `--bit-AiJsonView-indent` | spacing(2) | Indent of the entries of an open container, from the inline-start edge. |
| `--bit-AiJsonView-key-color` | var(--bit-clr-wrn-fg) | Color of the property keys. |
| `--bit-AiJsonView-string-color` | var(--bit-clr-suc-fg) | Color of the string values. |
| `--bit-AiJsonView-number-color` | var(--bit-clr-sec-fg) | Color of the number values. |
| `--bit-AiJsonView-boolean-color` | var(--bit-clr-pri-fg) | Color of true and false. |
| `--bit-AiJsonView-null-color` | var(--bit-clr-fg-ter) | Color of null. |
| `--bit-AiJsonView-toggle-color` | var(--bit-clr-fg-sec) | Color of the toggles: the chevrons and the braces of the containers, and their entry counts while collapsed. A disabled tree draws them in the disabled color instead. |
| `--bit-AiJsonView-chevron-size` | var(--bit-tpg-fs-2xs) | Size of the chevron of a toggle. |
## Examples
\n**Basic**:
```razor
Stream a tool result
```
```csharp
private readonly JsonElement order = JsonDocument.Parse("""
{
"id": "ord_4821",
"status": "shipped",
"total": 129.5,
"paid": true,
"coupon": null,
"customer": { "name": "Ada Lovelace", "email": "[email protected]", "address": { "city": "London", "zip": "N1 9GU" } },
"items": [
{ "sku": "KB-01", "name": "Keyboard", "quantity": 1, "price": 89.5 },
{ "sku": "MS-02", "name": "Mouse", "quantity": 2, "price": 20 }
]
}
""").RootElement;
private readonly BitAiJsonViewParams[] jsonViewParams =
[
new() { DefaultExpandDepth = 1, Styles = new() { Key = "font-weight: bold" } },
];
```
\n**Style & Class**:
```razor