JSON readable view
Replace JSON fields with a read-only, human-readable outline for non-technical editors.
JSON readable view
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
- In the DatoCMS project, open Settings → Plugins and add
datocms-plugin-json-readable-view. - On a JSON field, open Presentation and set the editor to JSON readable view.
Local development
pnpm installpnpm --filter datocms-plugin-json-readable-view devThen 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
cd plugins/json-readable-viewpnpm publishThe 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.