---
url: "https://vueda.dev/v3/reference/api/vue/JsonDisplay.md"
title: "JsonDisplay"
---

# JsonDisplay

## Overview

Presents a `JSON` value as formatted text. The block form indents it over several
lines, so nesting is readable rather than one long line; the inline form keeps it
compact for a table cell and truncates it past `maxLength`. A null or absent value
renders the same dash {@link DateTimeDisplay} uses for an empty date.

An empty object or array is a recorded value, not an absent one, so it renders as `{}`
or `[]`. The empty string is the `JSON` string scalar here and renders as `""`, unlike
{@link BooleanDisplay} and {@link DurationDisplay}, whose serializers send `""` to mean
a blank field. A value that cannot be serialized (a circular structure) falls back to
plain coercion rather than rendering nothing.

Theme entry: [JsonDisplay](/v3/reference/theming/keys/JsonDisplay.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-value">value</span> | `string\|number\|boolean\|object\|array` |  | `undefined` | The value to present. `null` and `undefined` render the dash. |
| <span id="prop-inline">inline</span> | `boolean` |  | `false` | Renders compact, on one line, for use inside a table cell or an existing text row. |
| <span id="prop-indent">indent</span> | `number` |  | `2` | Spaces per nesting level in the block form. |
| <span id="prop-maxLength">maxLength</span> | `number` |  | `200` | Character cap for the inline form, past which the text is truncated. `0` removes the cap. The block form is never capped: a read view exists to show the whole value. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root. |

## Source

`client/lib/display/json-display/JsonDisplay.vue`