QDevQDev
GUIDE · PREVIEWS

See what's inside
without expanding it.

A collapsed object or array isn't a dead end. QDev shows a compact peek of its contents inline, a fuller popover on hover, and the same hints on graph nodes — so you can scan a document without opening every branch.

The inline peek

When a container is collapsed, its row shows a one-line summary of what's inside — the first few members, recursing one level into nested containers, then +N for the rest:

lead { name: "Ben Carter", id: 3, email: "ben@acme.io", +1 }

The peek leads with an identifying field when it can find one — a name, title, id, or similar — so the summary is actually useful, not just the first key alphabetically. Values are clipped to keep it to one line, and a node that's still streaming (not yet loaded) shows a plain {…} or […]until it's available.

A tree with collapsed rows showing one-line inline peeks, e.g. lead: { name: "Ben Carter", id: 3, +1 }.
Collapsed rows show a one-line peek — here lead, deploys, and each service.

Hover for more

Hover the inline peek of a collapsed object and a popover opens with a fuller, vertical view — the field count, up to eight key/value pairs (each value clipped to a readable length), then +N more. It flips above or below the row to stay on screen. Arrays don't get the popover — their inline peek already reads top to bottom.

Previews in the graph

The Graph view mirrors the same idea: each node card shows a representative field or a container peek for its links, and hovering a link row opens the same popover you get in the tree — so you can read a graph without expanding every node.

Tune it in Tree settings

Open the gear icon and go to the Tree tab to control how values and previews render:

Value position
Where a row's value or collapsed-container preview sits — after the key (the default), or aligned in a gutter before or after it.
Wrap long values
Let long strings wrap over multiple lines instead of clipping to one. Off by default.
Max rows per value
When wrapping is on, how many lines a value can take before it's clamped (default 5). Click a clamped value to open it in full.
Mark collapsed gaps
Draw a subtle marker under a collapsed node so you can see where content was folded away.
The Settings dialog open on the Tree tab, showing Value position, Wrap long values, Max rows, and Mark collapsed gaps.
Settings → Tree: value position, wrapping, and gap markers.

You can also drag the gutter rule to resize where values sit. Previews themselves are always on for collapsed containers — there's no need to enable them.

Scan first, expand later.

Previews let you read a document's shape at a glance — no clicking required.

QDevQDev

The JSON viewer that answers back. Free for personal use, on Chrome and Firefox.

PRODUCT
RESOURCES
ACCOUNT
Source-available · zero-retention by default · your data stays yours
PrivacyTerms© 2026 qdev