---
url: "https://vueda.dev/v3/reference/theming/keys/JsonDisplay.md"
title: "JsonDisplay"
---

# JsonDisplay

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Mono, per the data-font rule: a payload is machine-generated and its nesting
depends on stable character widths. Size and leading are inherited rather than
set, so a read row keeps its own rhythm and a grid cell still follows
`data-density`. `whitespace-pre-wrap` keeps the block form's indentation while
still wrapping a long string value, and `break-words` stops an unbroken token
(a URL, a hash) from widening the row. The inline form carries `data-inline`,
which returns it to normal whitespace: it has no indentation to preserve, and a
table cell should collapse runs of space like any other cell.

Vue component: [JsonDisplay](/v3/reference/api/vue/JsonDisplay.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/JsonDisplay.md#theme-key-JsonDisplay-root) | 2 classes | Mono, per the data-font rule: a payload is machine-generated and its nesting depends on stable character widths. Size and leading are inherited rather than set, so a read row keeps its own rhythm and a grid cell still follows `data-density`. `whitespace-pre-wrap` keeps the block form's indentation while still wrapping a long string value, and `break-words` stops an unbroken token (a URL, a hash) from widening the row. The inline form carries `data-inline`, which returns it to normal whitespace: it has no indentation to preserve, and a table cell should collapse runs of space like any other cell. |
| [value](/v3/reference/theming/keys/JsonDisplay.md#theme-key-JsonDisplay-value) |  | The text itself, for a skin that wants to tint or size a payload. |
| [dash](/v3/reference/theming/keys/JsonDisplay.md#theme-key-JsonDisplay-dash) |  | Empty-value dash slot, matching DateTimeDisplay so the two read the same. |

<a id="theme-key-JsonDisplay-root"></a>

## root

> Mono, per the data-font rule: a payload is machine-generated and its nesting
depends on stable character widths. Size and leading are inherited rather than
set, so a read row keeps its own rhythm and a grid cell still follows
`data-density`. `whitespace-pre-wrap` keeps the block form's indentation while
still wrapping a long string value, and `break-words` stops an unbroken token
(a URL, a hash) from widening the row. The inline form carries `data-inline`,
which returns it to normal whitespace: it has no indentation to preserve, and a
table cell should collapse runs of space like any other cell.

Default classes:

```text
font-mono break-words
whitespace-pre-wrap data-[inline=true]:whitespace-normal
```

Source: `client/lib/theme/vueda-tailwind/display/JsonDisplay.theme.js:27`

<a id="theme-key-JsonDisplay-value"></a>

## value

> The text itself, for a skin that wants to tint or size a payload.

Default classes:

Source: `client/lib/theme/vueda-tailwind/display/JsonDisplay.theme.js:31`

<a id="theme-key-JsonDisplay-dash"></a>

## dash

> Empty-value dash slot, matching DateTimeDisplay so the two read the same.

Default classes:

Source: `client/lib/theme/vueda-tailwind/display/JsonDisplay.theme.js:35`