XML Grid View

VS Code: Grid, with source beside	VS Code: Flat
IntelliJ: Grid tab	IntelliJ: Flat tab
Value inspector: JSON as a grid	Value inspector: JSON tree (IntelliJ)

An XML and JSON viewer and editor for VS Code and IntelliJ. It shows the document as a tree and a spreadsheet-like grid, plus a Flat outline, with search and XPath. You can edit values in place, paste rows from Excel, add, duplicate, rename or delete elements, members and attributes, and export the grid as CSV. Edits go through the editor's own undo history and are never saved behind your back.

Package	What it is
packages/core	TypeScript model with no DOM or UI dependencies. Includes the saxes parser with source offsets, the grid builder, the search engine, XPath, and the host↔view message protocol. This is the reference implementation for the golden fixtures.
packages/webview	Preact UI. All parsing, model building, search and XPath run in a Web Worker. esbuild bundles it to webview.js and webview.css.
packages/vscode	VS Code extension: a CustomTextEditorProvider that hosts the web view.
packages/intellij	IntelliJ plugin with a native Swing UI. It has its own Java parsers and model (XML and JSON), and the Gradle build doesn't need Node.
fixtures/	Shared golden test cases. Vitest and JUnit both assert against them; see fixtures/SCHEMA.md.

Building

Requirements: Node 22+ and pnpm 10 (corepack enable). The IntelliJ plugin also needs any JDK able to run Gradle; Gradle provisions Java 21 automatically.

pnpm install
pnpm build            # core → webview → packages/vscode/xml-grid-view-plus-<version>.vsix
pnpm test             # vitest: core unit tests + golden fixtures
pnpm lint             # eslint + typecheck for all TS packages

cd packages/intellij
./gradlew buildPlugin # → build/distributions/xml-grid-view-intellij-<version>.zip
./gradlew test        # JUnit: golden fixtures + model + light UI tests

The VS Code smoke test runs with pnpm --filter xml-grid-view-plus test and downloads VS Code on first use.

Visual tests. The web view has screenshot tests (Light+ and Dark+ themes: grid, fields grid, Flat, find, inspector, drill-down, filters, banners, narrow window). They run in the Playwright Docker image, so they render the same on a Mac as in CI:

pnpm --filter @xmlgridview/webview visual          # compare with visual/__screenshots__
pnpm --filter @xmlgridview/webview visual:update   # accept changes, then review the PNG diff

On IntelliJ, VisualStyleTest paints the Grid and Flat panels off screen and checks the painted pixels against the style rules: section and stripe backgrounds across whole cells, tag and attribute colours, and headers and names that fit. The renders go to build/reports/visual, and CI uploads them with the test reports.

Installing

Prebuilt .vsix and IntelliJ plugin .zip files are attached to each GitHub release. To build them yourself, see above. Releases are made by pushing a v* tag; the release workflow runs the tests and then attaches both builds.

VS Code

Install XML Grid View Plus from the VS Code Marketplace: open Extensions, search "XML Grid View Plus" and click Install, or run code --install-extension bdarwin.xml-grid-view-plus. (On VS Code it has a different name because another publisher already uses "XML Grid View".)

To install from a file instead, choose Extensions → … → Install from VSIX… and pick packages/vscode/xml-grid-view-plus-<version>.vsix. From a terminal, run code --install-extension packages/vscode/xml-grid-view-plus-<version>.vsix.

XML and JSON files still open in the text editor. To open the viewer, use Open With XML Grid View, from the editor title button, the Explorer context menu or the Command Palette. To open a file type in the viewer by default, right-click a tab, choose Reopen Editor With… → Configure default editor for '*.xml'… and pick XML Grid View, or set it in settings.json:

"workbench.editorAssociations": { "*.xml": "xmlGridView.editor" }

IntelliJ (2024.3 or newer)

Install it from the JetBrains Marketplace: Settings → Plugins → Marketplace, then search for XML Grid View. In Remote Development (SSH/WSL), Marketplace installs land on the host automatically.

To install a build from the releases page instead, choose ⚙ → Install Plugin from Disk… and pick the zip. XML files still open in the text editor, and a Text | Grid tab bar appears at the bottom of the editor. Click Grid to open the viewer. To see source and grid side by side, use the editor tab's Split Right.

Features

The two hosts work the same way; small differences are listed under Known limitations.

• Tree: keyboard navigation. Enter or F4 moves the text editor's caret to the element, centers it and focuses the editor.

• Grid:

  • Rows are the selected element's children with one tag.
  • A summary above the grid shows the element's own attributes, single child values and text, which you can edit in place (double-click) or right-click for the structure menu. Chips under it switch between its child tags and (fields).
  • Columns are the attributes (@id), text-only child elements, and #text for mixed content.
  • Repeated or complex children appear as {tag ×n} cells that drill down, and a breadcrumb leads back up.
  • An element whose children don't repeat (say a <book> with title, author, price) opens as one row of (fields): its attributes and children side by side.
  • Sorting is numeric when every value is a number.
  • A quick filter (web view) and per-column filters (text plus a checklist of up to 1,000 distinct values, all ANDed together).
  • Auto-fit column widths, row numbers, multi-cell selection, and copy as TSV with an optional header.

• Flat view: the whole document as an outline sheet with Name and Value columns.

  • One row per element in document order, indented by depth. Attributes appear as @name rows under their element.
  • The element tree sits on the left, as in the Grid view. Selecting a node scrolls the sheet to it, and the tree follows the sheet's selection. The tree's filter box filters the sheet too.
  • Each section (each repeated record, such as every <book>) gets its own colour band, alternating between two colours. Element rows are tinted more strongly than value rows.
  • Rows collapse and expand. Copy gives plain TSV, without indentation, that pastes cleanly into Excel, and Enter/F4 jumps to the source.
  • In VS Code, use the Grid | Flat switch at the top of the view. In IntelliJ, use the Flat bottom tab (Text | Grid | Flat).

• Value inspector: for long text or JSON stored inside a node.

  • Open it with Shift+Enter on any cell, Flat value or tree node, or with the ⤢ button that appears on long values.
  • Text shows in full, with wrapping and search.
  • JSON is detected automatically and gets three tabs:
    • Tree: collapsible, with search.
    • Grid: the same drill-down grid as XML, with sort and filters.
    • Text: pretty-printed.
  • Big numbers are shown exactly as written.

• Editing values: you can edit existing attribute values and the text of leaf elements, in the Grid, in Flat and in the value inspector.

  • Starting an edit: select a cell, then press F2 or just start typing. Enter commits, Esc cancels, and Tab/Shift+Tab commit and move to the next or previous cell.
  • Inspector: has an Edit button for long text and JSON. JSON must parse before it can be saved, and a Format button pretty-prints it.
  • Escaping: values are escaped automatically. CDATA stays CDATA, and an empty <tag/> expands when it gets a value.
  • Undo and save: each edit is one normal, undoable change to the document. Saving is up to you.
  • Not supported: values that contain comments are left to the text editor.
  • Read-only: set xmlGridView.readOnly in VS Code to turn editing off. Read-only files can't be edited.

• Editing structure: right-click an element in the tree, a grid row or cell, or a Flat row. The menu has these actions:

  • Insert Child Element, Insert Element Before and Insert Element After: insert a new empty element with the name you give.
  • Duplicate: copies the element right after itself.
  • Rename: renames the start and end tags.
  • Add Attribute: asks for a name and a value.
  • Delete Attribute: shown when you right-click an attribute.
  • Delete: removes the element.

  Each action is one undoable edit and keeps the file's formatting: new lines copy the surrounding indentation, an empty <a/> opens up when it gets a child, and CRLF files stay CRLF. Names are checked before anything changes, including that a prefix is declared. The root can't be deleted or given siblings. An element that holds text doesn't take child elements, since that would mix text and elements. The new element is selected after the edit.

• Editing the grid like a spreadsheet: in a grid of repeating elements, the right-click menu also has row and column actions:

  • Insert Row Below: a copy of the row with every value emptied.
  • Move Row Up / Down (Alt+Shift+↑/↓) swaps it with its neighbour of the same tag.
  • Delete Rows removes the selected rows.
  • Add Column: a new attribute (@name) or child element on every row. Delete Column removes it from every row.
  • Paste (Ctrl/Cmd+V): paste a block copied from Excel, Google Sheets or the grid itself at the selected cell. Values go into the cells right and down from there, missing attributes and children are added, and rows past the end become new elements. A header row that matches the column names is skipped.
  • Clear Cells (Delete) empties the selected values.

  Each of these is one undo step.

• Export: the grid's visible rows (after filters and sorting) as CSV or JSON, from the Export button above the grid.

• Problems: errors and warnings that the editor reports for the file, such as XML Schema or DTD validation, are marked in the tree, the grid and the Flat view, with the message as a tooltip. In VS Code they come from other extensions (for example Red Hat's XML extension); in IntelliJ from the IDE's own validation, as of the last time the Text tab analysed the file. A counter above the view steps through them (F8 in VS Code, F2 in IntelliJ, Shift for the previous one).

• Selection stats: select more than one grid cell to see the count of non-empty cells and the sum, average, min and max of the numbers among them (in VS Code in the status line under the grid, in IntelliJ next to the row count).

• Allowed values while editing: when the schema limits a value (an XSD enumeration, a DTD's enumerated attribute, a JSON Schema enum), editing the cell opens a list of the allowed values; type to narrow it, Up/Down and Enter to pick. VS Code asks the editor's own completion, so XML needs an XML extension such as Red Hat's, while JSON Schema works out of the box. IntelliJ uses its built-in XML support (JSON is not covered there yet).

• Changes: what changed since the last git commit (or, for a file outside git, since it was opened) is highlighted. New rows and elements are green, changed values blue with the old value as a tooltip, and removed elements are struck through in the tree and marked with a red line in the grid. Records whose id, key or name differs are never taken for edits of each other. Elements are compared, not lines, so reformatting is not a change. A counter above the view steps through them (VS Code: Alt+F5, Shift for the previous one; IntelliJ: the Next / Previous Change shortcuts, Ctrl+Alt+Shift+Down / Up). In IntelliJ the last commit is the base revision of the IDE's version control. Turn it off in VS Code with xmlGridView.showChanges.

• Compare with a branch, tag, commit or another file: "Compare…" above the view (in IntelliJ's Flat view, in the right-click menu; in VS Code also the editor title button and the command palette) shows the changes against any branch, tag or commit of the file's git repository, against another file (for example two environments' config files), or since the file was opened. The comparison updates when that branch or file changes.

• Comments, processing instructions and the DOCTYPE are shown, read-only and in grey, in the tree and the Flat view.

• JSON (.json, .jsonc, .geojson): the same views and editing.

  • An object's members are its children, named by key; an array's items are shown as [0], [1], …; strings, numbers, booleans and null are values. Select an array of objects and it is a grid, one row per object.
  • Value edits keep types: typing 42 into a number writes a number, true into a boolean writes a boolean, and anything else (and every string) is written as a JSON string. New values in a column follow the type the column already has.
  • The menus speak JSON: Add Member / Add Item, Insert Member Before/After, Rename Key, Duplicate (array items), Delete, plus the grid's row and column actions and paste.
  • Comments and trailing commas (JSONC) are accepted and kept; commas and indentation are handled when adding and removing.
  • XPath is XML-only; Find works on JSON. Validation problems (e.g. JSON Schema in VS Code) are marked like XML ones.
  • In VS Code, JSON files open in the viewer the same way as XML files (see Installing).

• Find (Ctrl/Cmd+F):

  • Match case, whole word and regex.
  • Scope: the current grid or the whole document.
  • Targets: element names, attribute names, attribute values and text.
  • Matches are highlighted in cells and tree nodes, with an "n of m" counter. Enter/Shift+Enter and F3/Shift+F3 step through them.
  • A results list for document-wide searches, and an option to show only matching nodes in the tree.

• XPath mode:

  • Every namespace prefix declared in the document is bound automatically. The default namespace is bound to d:, because XPath 1.0 can't match it without a prefix.
  • Errors appear inline, and scalar results are shown directly.

• Live updates: the view follows edits made in the text editor (debounced 300 ms). Tree expansion, selection, tag group, sort and filters are kept wherever their paths still exist.

• Malformed XML: the view keeps the last valid model and shows a warning banner with the error location. Click it to jump there.

• Large files: a 50 MB file opens in about 1–2 seconds in either editor. In VS Code, files over 50 MB need an explicit Load anyway (the xmlGridView.largeFileThresholdMB setting). VS Code doesn't give extensions files over 50 MB as text documents, so Open With XML Grid View opens those in a read-only view that reads the file from disk.

  • Records mode (VS Code, XML over 150 MB, xmlGridView.maxFileSizeMB): the file is too big to load, so it opens as its root's children (the records) in a read-only grid that reads only the rows on screen from disk. Indexing streams through the file once (about 200 MB/s) and keeps only where each record starts and ends, so multi-GB files open. Columns come from the records seen so far; Find in all records searches the whole file; double-click a row to open that record as text; a chip per tag when the root holds different kinds of records. There is no tree, sorting, filtering or editing in this mode, and JSON files over the limit still show a notice.
  • IntelliJ asks only when the file may not fit in the IDE's free memory; a 500 MB file loads in about 9 seconds and uses about 2.5 GB. Slow loads show a progress banner in IntelliJ.
  • Over IntelliJ's 20 MB limit: IntelliJ only loads a preview of such files. Grid and Flat read the whole file from disk instead and show it read-only (no value editing), refreshing when the file changes on disk.

• Theming: VS Code maps its --vscode-* theme variables onto the view's --xgv-* CSS variables. IntelliJ uses JBColor/JBUI throughout.

Releasing

See PUBLISHING.md. Pushing a v* tag runs the full test suite, then creates a GitHub release and publishes to the VS Code Marketplace, Open VSX and JetBrains Marketplace. Each marketplace is published only once its token secret is set.

License

MIT © Darwin Baisa

Golden fixtures

fixtures/cases/*.xml hold the shared test cases. For each case, the expected tree, grids, search hits and XPath results are generated from the TypeScript core:

pnpm fixtures:generate   # rewrite expected files — then review `git diff fixtures/`
pnpm fixtures:check      # what CI runs: fails if anything is stale, never writes

To add a case:

1. Drop <name>.xml into fixtures/cases/. Use LF line endings.
2. Optionally write <name>.search.json with queries and "expected": null.
3. Run the generator and review the output by hand.

CI never accepts regenerated output on its own.

Known limitations

• Grid model:
  • Only elements without attributes and without element children count as text-only columns. Elements with attributes, such as <price cur="USD">1</price>, appear as {price ×1} drill-down cells.
  • Mixed-content text is joined and trimmed but not collapsed, so Hello <b>x</b> world shows #text as Hello world.
• XPath:
  • XPath 1.0 only.
  • The web view uses a pure-JS engine (xpath + @xmldom/xmldom), because browsers don't expose DOMParser or document.evaluate inside Web Workers. The core also has a native DOMParser backend for UI-thread use.
  • XPath needs a well-formed document.
• Malformed input: saxes (web view) and the JDK parser (IntelliJ) recover from errors differently. Partial trees can differ, and error columns can differ. Fixtures compare only the line.
• Comments, processing instructions and DTDs: they're shown but can't be edited from the views, and the tree shows a leaf element's inline comments only in the Flat view. Custom DTD entities aren't expanded.
• Line endings: IntelliJ normalizes line endings to LF, so a CRLF file reports different offsets in each host. Navigation is correct in both.
• Large files: both editors hold the whole model in memory, about 4–5× the file size in IntelliJ. If a file doesn't fit, raise the IDE's memory in Help | Change Memory Settings.
• IntelliJ differences:
  • The column filter opens from the header's right-click or context menu, not from a header button.
  • Copy with Header is a context-menu item, not a setting.
  • A find hit inside a leaf child selects its row, not the specific cell.
  • The Swing UI is covered by headless light tests but hasn't been tried by hand in runIde.
• VS Code: the view reloads when its tab is hidden (retainContextWhenHidden is off to save memory). UI state is restored from saved view state.