### Replace JSON fields with a read-only, human-readable outline for non-technical editors.

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## JSON readable view

(Image content)

A DatoCMS field editor for JSON fields. It replaces the code editor with a read-only, human-readable outline so non-technical editors can scan machine-written data without reading JavaScript objects.

The plugin never writes to the field. Background syncs or other systems own the value; this surface is display only.

## Requirements

-   Field type is **JSON**

Assign **JSON readable view** as the field’s presentation editor. Optionally set **Collapsible items** in the field’s presentation settings.

## Collapsible items

| Mode | Behavior |
| --- | --- |
| **Collapsed** (default) | Nested object rows start closed |
| **Expanded** | Nested object rows start open |
| **Always open** | Nested content is always shown; no `+` / `−` control |

## How values are shown

| Kind | Presentation |
| --- | --- |
| Object | Labeled outline with humanized keys (`photoUrl` → “Photo URL”) |
| Array of objects | Stacked item blocks with collapse controls |
| Array of plain values | Vertical list |
| HTTP(S) URL | Clickable link (opens in a new tab) |
| Image-looking URL | Small preview; falls back to a link if the image fails |
| Boolean | Yes / No |
| `null` / empty | Empty / **No data** |
| Unparseable value | **Can't display this value** |

Nested objects and arrays start expanded one level deep. Deeper nests collapse with a short count (“3 items”, “2 fields”).

## Install

### From npm

1.  In the DatoCMS project, open **Settings → Plugins** and add `datocms-plugin-json-readable-view`.
2.  On a JSON field, open **Presentation** and set the editor to **JSON readable view**.

### Local development

```sh
pnpm installpnpm --filter datocms-plugin-json-readable-view dev
```

Then add a **private plugin** whose entry point is `http://localhost:5174/`. Use Chrome or Firefox; Safari does not handle localhost plugin iframes well.

To keep a working Marketplace install untouched, duplicate it and point only the copy at localhost.

## Empty and invalid fields

An empty field shows **No data**. The plugin does not write a default.

If the stored value cannot be read as JSON, the editor shows **Can't display this value** instead of a blank frame.

## Publish

```sh
cd plugins/json-readable-viewpnpm publish
```

The package publishes `dist/` plus the marketplace images in `docs/`. Bump `version` before each release. Existing DatoCMS installs do not update themselves; use **Switch to a different version**.