Views

The same document, five ways. Switch with ⌘1–⌘4, and open Compare with ⌘D. The default is Tree.

Every view reads the one document you have open — there is nothing to import or convert between them. The view switcher lives in the document canvas head and appears once a document loads. Pick the shape that fits the task: an outline to browse and edit, raw text to read line by line, a spreadsheet for tabular data, a node diagram to see structure, or a diff to spot what changed.

Tree

The default and primary view: a virtualized, indented key: value outline. Because rows are virtualized and streamed in slices, the Tree handles huge files without lag.

  • Carets — expandable rows show an orange caret; click a row to select it and toggle it open or closed.
  • Type-count chips — a collapsed container shows a chip like {3 props} or [5 items], so you know what is inside without expanding it.
  • Kind-coloured values — strings, numbers, booleans and null each get their own hue, while keys stay uncoloured. A bare URL value renders as an underlined link you can open in the system browser.
  • Indent guides — vertical guides mark each depth level and brighten on hover.
  • Drag to reorder — grab a row's drag grip to move it; an orange drop-line shows where it will land.
  • Row menu — a ⋯ button (or right-click) opens a per-row menu of structural actions. See Editing.
  • Inline editors — edit a value in place with a type-aware editor.

A breadcrumb bar across the top shows the path to the current node and carries Expand, Collapse and Search actions. Click any crumb to jump to that ancestor.

Code

A full-document raw-JSON editor backed by CodeMirror 6. Read or edit the text directly, with the gutters and feedback you expect from a code editor.

  • Gutters — a line-number gutter and a fold gutter; folded ranges collapse to a placeholder chip.
  • Orange cursor and active line — the caret and the active line are tinted with the accent.
  • Live lint — invalid JSON is underlined as you type.
  • Search highlighting — matches from the find bar are highlighted, with the current match outlined.

There is no minimap. To commit or revert your edits, see Editing.

Grid

An array of objects rendered as a virtualized spreadsheet — both rows and columns are virtualized, so wide, long tables stay responsive.

  • Index column — a leading # column numbers the rows.
  • Sortable headers — click a header to sort; markers flag columns whose values are of mixed types or nullable.
  • Per-column filters — narrow rows by range, by operator and value, by a checklist of distinct values, or by presence (empty / not empty). There are 13 operators, combined as OR-of-AND groups.
  • Quick-filter bar — a single input filters rows across the whole table.
  • Zebra rows and kind-coloured cells — numbers are green and right-aligned; strings, booleans and null are coloured by kind; and odd rows carry a faint stripe.
  • Cell inspector — select a cell and a panel at the bottom shows its full value, pretty-printed for objects and arrays.

The Grid is available when the document is an array of objects; otherwise it explains why it can't be shown.

Graph

A left-to-right node diagram drawn on a dot grid. Each object or array becomes a card; expanding a row spawns the child cards it points to.

  • Cards — every card has a header and kind-coloured key: value rows.
  • Expand/collapse ports — expandable rows carry a circular port on their right edge; click it to grow or fold that branch.
  • Floating dock — a bottom dock holds fit-to-view, zoom, expand-all and a settings popover (elbow vs. curve edges, animated vs. instant expand).
  • Search bar — find a node by name and centre the canvas on each match.
  • Image export — export the diagram as PNG, JPEG or SVG.

Pan with the wheel or by dragging; hold ⌘ and scroll to zoom at the cursor.

Compare

Diff the current document against another open tab or a file on disk. Open Compare with ⌘D. There are three modes:

  • Side-by-side — the two documents as code, with the diff highlighted per side.
  • Tree — two read-only trees, diff-tinted row by row.
  • Inline — a unified, single-column text diff.

Added is green, removed is the accent, changed is amber, and moved entries are tracked too. Prev/Next navigation steps through the differences, and a Sync scroll toggle keeps the two panes aligned. For the full walkthrough, see Compare.