AI
AiJsonView
Bit.BlazorUI.AIJsonViewer
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.
Notes
To use this component, you need to install the
Bit.BlazorUI.AI(opens in a new tab)
nuget package, as described in the Optional steps of the
Getting started page.
BitAiJsonView needs nothing but its Value: no session and no transport. It is a plain view of a
JsonElement, so it works the same over a value a tool returned, a payload a model streamed (see the
Structured output scenario) or anything an app parsed itself.
Each container's head is a native button carrying aria-expanded, named by its key - or, with no key, by
where it is: the root, or its index in an array (the JsonRoot and JsonArrayItem strings) - so the
tree is read and driven from the keyboard like any disclosure. Keys and strings are drawn the way JSON writes
them, a quote, a backslash or a line break in them escaped.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Give it a Value. The first two levels are open and the rest start collapsed, showing their entry count:
a click on the head of a container - its chevron, its key or its brace - opens or closes it. Strings, numbers,
booleans and null each take a color of their own.
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null"name": "Ada Lovelace""email": "[email protected]"}]}
Expand depth
DefaultExpandDepth is how many levels open by themselves (2 by default): 0 shows the root collapsed, a
large number opens everything. A container the user toggled keeps the state they gave it when the depth
changes; the rest follow the new depth.
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null}
Large containers
A container holding more than LargeContainerSize entries (24 by default) starts collapsed at any depth,
so a long result costs one row until someone asks for it. The second tree raises the limit to 50 and opens the
same 30 readings.
192021222324181920212223241819202122232418192021222324181920]
Partial JSON
A model writes JSON a few characters at a time, so for most of a generation the payload is not valid JSON.
BitAiPartialJson.TryParse (see the tables below) repairs what has arrived into the closest valid document
- closing the open containers, keeping a string that is still being written - and the tree grows with it. Collapse a node while
it streams: the tree remembers it by its path.
Disabled
A disabled tree keeps its values readable and turns its toggles off: they stay where they are and drop the
page's activation handlers along with them.
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null"name": "Ada Lovelace""email": "[email protected]"}]}
Cascading parameters
BitParams with a BitAiJsonViewParams sets what every tree inside it agrees on - how much of it starts
open (DefaultExpandDepth, LargeContainerSize), the Classes and Styles of its parts, and
the parameters every component shares, such as Disabled or Dir - rather than the value a single tree
shows. A tree keeps what it sets itself: here both trees take the bold keys, the first opens one level as the
cascade says, and the second sets DefaultExpandDepth back to 2 on its own.
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null}
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null"name": "Ada Lovelace""email": "[email protected]"}]}
Style & Class
Style and Class reach the root, Styles and Classes each part. The public
--bit-AiJsonView-* variables (see the CSS variables table) inherit, so set on :root, a container
or an instance's Style they re-skin every tree below - a tree nested in another's value included.
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null"name": "Ada Lovelace""email": "[email protected]"}]}
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null"name": "Ada Lovelace""email": "[email protected]"}]}
"id": "ord_4821""status": "shipped""total": 129.5"paid": true"coupon": null"name": "Ada Lovelace""email": "[email protected]"}]}
RTL
In a right-to-left tree the entries indent from the right and the chevron of a collapsed container points left,
whether the direction comes from Dir or from a dir attribute around it.
"شناسه": "ord_4821""وضعیت": "ارسال شده""جمع": 129.5"پرداخت شده": true"نام": "آدا لاولیس""شهر": "لندن"}]}
"شناسه": "ord_4821""وضعیت": "ارسال شده""جمع": 129.5"پرداخت شده": true}
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitAiJsonView CSS variables
| 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. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiJsonView 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. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
BitComponentBase 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. |
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. |
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. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.