> ## Documentation Index
> Fetch the complete documentation index at: https://ngquct-refactor-inspector-field-layout.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cell and Row Viewers

> View and edit JSON, PHP serialized, image and binary cell values, set per-column display formats, and inspect whole rows in the sidebar

Click the chevron on a JSON or blob cell to open its value in a popover anchored to that cell. Which viewer opens follows the column: its declared type, or the **Display As** choice on its header, and that choice changes rendering only, never what is stored.

Whether it opens for editing follows the row and the column. A row marked for deletion opens nothing at all. A result the app cannot write back to, a generated column, and a column the driver marks immutable such as MongoDB's `_id` all open read-only; [Change Tracking](/features/change-tracking) covers which results are writable. PHP serialized values, and binary past the hex cap, are read-only for everyone.

## Display as formats

Right-click a column header and pick **Display As**. The submenu lists the formats that fit the column type, with a checkmark on the active one.

| Format                        | Column types | Effect                                                             |
| ----------------------------- | ------------ | ------------------------------------------------------------------ |
| Raw Value                     | all          | Shows the stored value, and turns off detection for that column    |
| Text                          | binary       | Reads the bytes as UTF-8, trailing `BINARY(N)` padding trimmed     |
| UUID                          | binary, text | Renders 16 raw bytes or a 32-digit hex string as a hyphenated UUID |
| Unix Timestamp (seconds)      | integer      | Renders the number as a formatted date                             |
| Unix Timestamp (milliseconds) | integer      | Same, treating the number as milliseconds                          |
| JSON                          | text         | Opens the cell in the JSON viewer                                  |
| PHP Serialized                | text         | Opens the cell in the PHP serialized viewer                        |

An override persists per column, scoped to the connection and table. A column with a format set copies in that format when you copy the single cell; a block of cells or a whole row always copies the stored value.

Id-like binary and character columns, integer columns whose names read as timestamps, and binary columns whose first rows all read as UTF-8 pick up their format on their own. **Smart value detection** in [Settings > Data](/customization/data-settings) turns that off, and a manual choice always wins over it, **Raw Value** included. MongoDB binary columns never offer UUID, since the driver decodes them under its own Legacy UUID Encoding setting; see [MongoDB](/databases/mongodb).

**Text** decides per cell, not per column: an image or a hash sitting in a column set to **Text** still reads as `0x89504E…`. The cell edits as hex either way.

## JSON viewer

A JSON-typed column opens on the chevron; double-click or `Enter` edits it inline instead. A text column holding JSON needs **Display As > JSON** first.

The popover has two modes. **Text** is syntax-highlighted and pretty-printed, and editable when the cell is. **Tree** is collapsible, with a search field, and navigation only. Both keep your key order and exact number values, integers larger than JavaScript can represent included.

<Frame caption="JSON editor popover with Text and Tree modes">
  <img className="block dark:hidden" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/dVn-gILXlhQ7lA6L/images/json-editor-popover.png?fit=max&auto=format&n=dVn-gILXlhQ7lA6L&q=85&s=450311552d6467951d02033b9d754442" alt="JSON editor popover" width="3024" height="1722" data-path="images/json-editor-popover.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/dVn-gILXlhQ7lA6L/images/json-editor-popover-dark.png?fit=max&auto=format&n=dVn-gILXlhQ7lA6L&q=85&s=be8c6c8e0d3a929d90d8be36d68d1408" alt="JSON editor popover" width="3024" height="1722" data-path="images/json-editor-popover-dark.png" />
</Frame>

The mode you switch to becomes the default for the next value, which is the same preference as **JSON Viewer > Default view** in Settings. The pop-out button detaches the viewer into its own resizable window.

Opening a value and seeing it pretty-printed is not an edit: the row is marked changed only once you alter the content. **Save** commits a compact value, key order and numbers preserved, through the [change tracking](/features/change-tracking) queue. Text that is not valid JSON prompts first.

### Filtering a tree

The search field above the tree filters keys and values as you type. The [PHP serialized tree](#php-serialized-viewer) works the same way.

* Matching ignores case and accents, so `cafe` finds `café`. Full-width and half-width differ: `ABC` does not find `ＡＢＣ`.
* A row matches on its whole value, not the shortened form shown, so a match deep inside a long string counts. A match under a collapsed parent opens its parents, and a key that matches keeps its contents and stays expandable.
* A filter that matches nothing says so, and says separately when the document was cut at 5,000 nodes, since the rows past the cut were never searched.

## PHP serialized viewer

Set **Display As > PHP Serialized** on a text column, then double-click or press `Enter`. The viewer is read-only: PHP serialized values round-trip through PHP itself.

**Tree** mode filters the same way as the JSON tree, with type badges on the nodes (`str`, `int`, `arr`, `obj`, `ser`, `ref`) and visibility badges on object members (`protected`, `private (ClassName)`). A custom-serialized class (the `C:` token) is one opaque leaf, and a reference (`r:`/`R:`) shows as `→ #N` and is not followed. **Raw** mode shows the original string with text selection.

## Blob and hex

A blob cell renders in the grid as compact hex (`0x48656C…`), unless its column reads as text. Click the chevron or double-click for the popover: a classic hex dump with offset, byte columns, and ASCII, plus an editable hex field under it on an editable table. That field takes spaced or continuous hex, with or without a `0x` prefix, and invalid hex disables **Save**.

Bytes that read as an image open on the picture instead, with **Hex** the second segment. The [image viewer](#image-viewer) covers that.

## Image viewer

A cell whose content is an image opens on the drawing, with its stored form one segment away: **Hex** for a binary column, **Source** for SVG markup in a text column. The source stays editable wherever the cell is, and **Save** commits it through the same [change tracking](/features/change-tracking) queue as any other edit.

Detection reads the value, not the column, since the same PNG turns up in `BLOB`, `BYTEA` and `VARBINARY`, and SVG arrives as often in a text column as a binary one. PNG, JPEG, JPEG 2000, GIF, TIFF, BMP, ICO, WebP, HEIC, HEIF and AVIF are identified from their header; SVG from its root element, behind any byte order mark, XML declaration, comment or doctype. A PDF, a Photoshop file and a camera raw file are left as hex, since a database client that opened them as "the image in this cell" would be guessing. **Display As > Raw Value** on the column turns detection off.

<Frame caption="One value, drawn in the popover and again in the row inspector">
  <img className="block dark:hidden" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/aX0D3pAvRYSYWiRh/images/cell-image-viewer.png?fit=max&auto=format&n=aX0D3pAvRYSYWiRh&q=85&s=eaf4e030846d758f75471c4a7a901ff6" alt="A cell popover and the row inspector each drawing an SVG logo on a transparency checkerboard, both showing Image and Source segments" width="1512" height="861" data-path="images/cell-image-viewer.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/aX0D3pAvRYSYWiRh/images/cell-image-viewer-dark.png?fit=max&auto=format&n=aX0D3pAvRYSYWiRh&q=85&s=2c04524aef15749b975001b6595a40a1" alt="A cell popover and the row inspector each drawing an SVG logo on a transparency checkerboard, both showing Image and Source segments" width="1512" height="861" data-path="images/cell-image-viewer-dark.png" />
</Frame>

Transparency draws on a checkerboard. The footer names the format and, for a raster image, the stored pixel size, which is what the file holds rather than what fits the pane. **Copy Image** puts the drawing on the clipboard as an image; **Copy** on the cell itself still copies the stored value. The pop-out button opens a resizable window, read-only there.

SVG rasterizes in a separate process that reads the markup and nothing else. It reaches no network and no file: an `<image href="https://…">`, an `@import`, an external entity and a `<script>` all draw as nothing. A document that cannot be drawn within three seconds is abandoned and the pane says so.

## Limits

A value that refuses to open in one mode still opens in another.

| Viewer                  | Cap                                   | Past the cap                                          |
| ----------------------- | ------------------------------------- | ----------------------------------------------------- |
| JSON pretty-printing    | 500,000 characters                    | The value shows as stored                             |
| JSON tree               | 100,000 characters                    | "JSON Too Large". Read it in Text mode                |
| JSON and PHP trees      | 5,000 nodes                           | The first 5,000 load, and a `…` row marks the cut     |
| PHP serialized          | 5,000,000 characters, 256 levels deep | Tree shows a placeholder, Raw still works             |
| Hex dump and hex editor | 10 KB                                 | The dump is truncated, and the editor opens read-only |
| Blob cell in the grid   | First 64 bytes                        | Rendered as `0x48656C…`                               |
| Image preview           | 16 MB                                 | "Too Large to Preview". The source still opens        |
| SVG rasterizing         | 3 seconds                             | "Could Not Render This Image". The markup still opens |

## Row details inspector

**View > Show Inspector** (`Cmd+Option+I`), or the toolbar button at the trailing end, opens it. Each field carries its column name and type on one line, with the value on the line beneath, so the value gets the row's full width however long the column name is. A field's editor follows its content, with no **Display As** step, and the first match wins.

| Content                                                                                          | Editor                                                          |
| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
| A JSON column, or text that parses as JSON                                                       | JSON editor                                                     |
| A PHP serialized value                                                                           | Read-only [PHP viewer](#php-serialized-viewer)                  |
| An image, in any column                                                                          | [Image viewer](#image-viewer), source behind the second segment |
| An enum, set, or boolean column                                                                  | Picker                                                          |
| A blob column                                                                                    | Hex editor                                                      |
| A `TEXT` variant, `CLOB` or `NTEXT` column, or any value with a line break or over 80 characters | Scrolling text box                                              |
| Anything else                                                                                    | Single-line field                                               |

<Frame caption="Row details inspector with per-field editors">
  <img className="block dark:hidden" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/dVn-gILXlhQ7lA6L/images/row-details-inspector.png?fit=max&auto=format&n=dVn-gILXlhQ7lA6L&q=85&s=a717c845256fff1e1490fd8ae0fb4f6f" alt="Row details inspector" width="1560" height="960" data-path="images/row-details-inspector.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/dVn-gILXlhQ7lA6L/images/row-details-inspector-dark.png?fit=max&auto=format&n=dVn-gILXlhQ7lA6L&q=85&s=ea2afce4aabf8f0c23b627fa2a9d0a97" alt="Row details inspector" width="1560" height="960" data-path="images/row-details-inspector-dark.png" />
</Frame>

The length test reads the stored value, so a long value pasted into a single-line field stays on one line until you save and reselect the row.

The hex editor shows the first 10 KB of a blob. Past that it reads **Truncated, read only** and refuses edits, rather than saving back the part it could show.

The text box and the JSON editor each carry a drag handle under them, with separate remembered heights that survive a relaunch.

**Open in Window** detaches a JSON, PHP or text value into its own resizable window; on an editable row, edits there join the same pending changes as the field. An image detaches read-only. The expand button on a JSON, PHP or long text field grows it to fill the inspector's height with the other fields still listed around it; click it again to shrink it back. Binary and image fields draw at a fixed height and carry no expand button.

Every field carries a menu at its trailing edge, and right-clicking the field opens the same one. **Set NULL**, **Set DEFAULT**, **Set EMPTY** and **SQL Functions** need an editable field; `Ctrl+Option+N` and `Ctrl+Option+D` reach the first two from the keyboard. **Copy Value** is always there, and a read-only field keeps its text selectable.

With no row selected, the inspector describes the table the tab is bound to: data, index and total size, row count, average row size, engine, collation, and creation and update dates, as far as the database reports them. A tab with no table of its own, such as a query, leaves it empty. On a Structure tab it follows the structure grid and names the selected column.

## Row as JSON

Right-click a row and choose **Show Row as JSON**, or open the inspector and switch it to **JSON**. The row prints as one JSON object, keys in the result's own column order: numbers and booleans unquoted, NULL as `null`, binary as hex. Like **Fields** beside it, it prints every column the result carries, including any hidden in the grid. A JSON column, and a text column holding a document, arrive as nested keys instead of as a string.

<Frame caption="A Track row as JSON, with its AlbumId key opened onto the Album row">
  <img className="block dark:hidden" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/dVn-gILXlhQ7lA6L/images/row-as-json.png?fit=max&auto=format&n=dVn-gILXlhQ7lA6L&q=85&s=a4fa2b208bb89712dd0b8524c8842da8" alt="Row as JSON" width="1512" height="861" data-path="images/row-as-json.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/ngquct-refactor-inspector-field-layout/dVn-gILXlhQ7lA6L/images/row-as-json-dark.png?fit=max&auto=format&n=dVn-gILXlhQ7lA6L&q=85&s=a0a85c597e48ec519f4f077cf29389d0" alt="Row as JSON" width="1512" height="861" data-path="images/row-as-json-dark.png" />
</Frame>

A foreign key carries a disclosure control. Click it and the referenced row is fetched and printed underneath; a foreign key inside that row expands the same way, five levels down. A key pointing back at a row already open in the tree, and one past the fifth level, carry a warning icon that says which. A NULL foreign key has no control.

**Always Expand Foreign Keys**, in the options menu at the trailing end of the filter field, fetches the first level on every row selected from then on. It starts off and stays off until you turn it on, every session, since each key it follows is a query. The rest of that menu is **Copy Visible**, which puts the printed lines on the pasteboard as they stand, **Collapse All**, and **Expand All**. Long text wraps rather than being cut.

The filter field takes text, or a regular expression wrapped in slashes such as `/^rental/`. It matches keys and values, keeps the keys that lead to a match along with everything under a key that matches, and opens what was collapsed. `Escape` clears it. An invalid expression outlines the field in red and filters nothing.

Editing stays on **Fields**. Right-click a line for **Copy Value** and **Copy Key**; a foreign key line adds **Open** for the referenced table, filtered to that row.

Caps: a document over 100,000 characters prints as a string rather than as nested keys, the same cap the [JSON tree](#limits) has. A binary value shows its first 64 bytes followed by an ellipsis, the same cap the grid's own **Copy** applies.

For whole-row JSON, switch the result to JSON mode with the switcher at the leading edge of the status bar, or from **View > Result View**. It shows what the [grid](/features/data-grid) shows, in the same order, minus hidden columns and rows marked for deletion, which the count line reports separately. Select rows in Data mode first to narrow it, then click **Copy JSON**.