JSON/JSONL Viewer

View and edit JSON Lines (.jsonl, .ndjson, .jsonlines) and JSON (.json, .jsonc, .geojson) files right inside VS Code, in four views: a fast, colorful Table, a Tree, Pretty-printed text and the Raw file. Every edit goes through the normal text document, so undo/redo, save, dirty markers and git diffs work exactly as they do in the text editor.

Opening files

JSON/JSONL Viewer never takes over a file type on its own. To open a file in it:

• Right-click a file in the Explorer → Open in JSON/JSONL Viewer, or
• Click the table icon in the editor title bar of an open JSON/JSONL file, or
• Use Reopen Editor With… → JSON/JSONL Viewer.

To make it the default for some file types, run JSON/JSONL Viewer: Use JSON/JSONL Viewer as Default Editor… and pick the patterns (for example *.jsonl).

Features

Table

• One row per JSONL line, or per element of a JSON array. In a JSON document the largest array of objects is picked automatically; choose another one from the tree with Show as Table.
• Columns are inferred from the data, and nested objects are flattened into dot paths such as user.geo.country. The depth is set by jsonlViewer.table.flattenDepth.
• Columns can be sorted (click a header), resized, reordered (drag), pinned to the left, hidden and filtered. The layout is remembered for each file.
• Rows are rendered virtually and fetched on demand, so files with hundreds of thousands of lines scroll smoothly.
• Lines that are not valid JSON appear in red with the parse error and column. They don't break the rest of the file. Use ‹ › in the toolbar to jump between problems.

Editing

• Double-click a cell (or press Enter/F2) to edit it. Strings stay strings; other cells accept any JSON value. Tab saves and moves to the next cell.
• Only the edited value is rewritten. The rest of the line, including formatting and comments in .jsonc, is untouched, so git diffs stay minimal.
• Insert, duplicate (Ctrl+D), move (Alt+↑/↓) and delete (Del) rows. Editing a missing cell adds the field.
• The detail pane shows the selected record as highlighted JSON. Edit opens it as a JSON editor (comments and trailing commas allowed; Ctrl+Enter applies). Broken lines can be fixed there too.
• Files larger than jsonlViewer.readOnlyAboveMB (default 50 MB) open read-only. One click allows editing anyway.

Tree

A collapsible tree with type colors, item counts and indentation guides colored by depth. Large arrays and objects load in pages. Edit values inline, add, rename or delete keys, copy values or paths, and reveal any node in the text editor.

Pretty and Raw text views

• Pretty shows the data indented and syntax-highlighted. In a JSONL file every record in view is printed as its own block under a ── line N separator, so search, query, filters and sort apply here too. In a JSON file the whole document is shown re-indented.
• Raw shows the file exactly as stored, with line numbers. In JSONL files, invalid lines are marked red.
• Click a line to select its record in the detail pane. Double-click a line number to jump to it in the text editor.
• Both views are read-only; edit in the Table, Tree or detail pane, or open the text editor.
• Lines load in chunks as you scroll, so very large files open quickly. Extremely long lines are shortened in the display (the file itself is untouched).

Word wrap

↩ Wrap (or Alt+Z, as in VS Code's editor) wraps long lines in the Pretty and Raw views, the detail pane and the value popup. It is off by default and remembered per file. Table cells always stay on one line; open a long value with its expand button.

Search, query and filter

• Search looks for text anywhere in the raw row.

• Query takes a jq-style expression:

  .score > 0.8 && .label == "spam"
  len(.messages) >= 3 and .meta.lang in ["en", "de"]
  .text ~ "refund"              # contains, case-insensitive
  .id =~ /^usr_\d+$/i           # regex
  exists(.trace)  missing(.label)  empty(.tags)
  error()  invalid()               # row state
  

  Bare names also work (score > 3). Available functions: len, exists, missing, empty, type, lower, upper, trim, number, string, abs, round, min, max, sum, keys, contains, startsWith, endsWith, matches, line.

• Column filters (toolbar Filters): plain text means "contains". You can also use =value, !=value, >10, <=0.5, and = on its own to match empty values.

Column stats

For the rows in view, each column shows its type distribution, present/missing/null counts, distinct values, min/max/mean, string lengths and top values. Click a top value to filter by it.

Long values, Markdown and images

Long strings get an expand button. The popup shows them as text, rendered Markdown, an image preview (image URLs or data:image/... base64), or pretty JSON when the string contains JSON.

Validation, conversion and comparison

• Validate Against JSON Schema… checks every row (draft-07 / 2019-09 / 2020-12 core keywords, local $ref). Failing rows are highlighted and their errors appear in the detail pane. Schemas can also be applied automatically with jsonlViewer.schemas.
• Infer JSON Schema from Data opens a schema built from the file.
• Export View as CSV/TSV… exports the rows and columns currently visible, with filters and sort applied.
• Convert JSONL ↔ JSON Array…, Format (Pretty) and Minify.
• Copy rows as JSONL, JSON, CSV or a Markdown table.
• Compare Rows with Another File… diffs two files row by row, matched by a key column (or by position). It shows changed fields, added rows and removed rows.

Follow tail

⤓ Tail keeps the newest rows in view while a log file grows. It is off by default. The viewer never polls the disk: it only reacts when VS Code reloads the document.

Colors

Everything is colorful by default and follows your theme. The Settings UI has color pickers for all of these:

Highlight rows by content:

"jsonlViewer.colors.rowHighlights": [
  { "query": ".level == \"error\"", "color": "#ff000030" },
  { "query": ".latency_ms > 800",   "color": "#ffaa0025" }
]

With the theme preset you can also set colors per theme through workbench.colorCustomizations. Every color has an ID: jsonlViewer.stringForeground, jsonlViewer.numberForeground, jsonlViewer.booleanForeground, jsonlViewer.nullForeground, jsonlViewer.keyForeground, jsonlViewer.punctuationForeground, jsonlViewer.errorRowBackground, jsonlViewer.invalidRowBackground, jsonlViewer.stripeBackground and jsonlViewer.depth1Foreground … depth6Foreground.

"workbench.colorCustomizations": {
  "[Default Dark Modern]": { "jsonlViewer.stringForeground": "#ffb86c" }
}

Other settings

Keyboard

Installing

JSON/JSONL Viewer is distributed as a VSIX file. It is not published to the Marketplace.

code --install-extension jsonl-viewer-myriadartificia-0.2.2.vsix

Development

npm install
npm test            # unit tests (parser, query language, schema, model, text views, export, diff)
npm run test:e2e    # runs the extension inside VS Code
npm run harness     # renders the real webview in headless Edge, checks scenarios, writes images/
npm run package     # builds jsonl-viewer-myriadartificia-<version>.vsix

The extension has no runtime dependencies. The host side is TypeScript compiled with tsc (src/); the webview is plain JavaScript and CSS (media/). src/model.ts holds the parsed document and is unit-tested without VS Code.