XML/JSON Data Grid Viewer
View and edit XML and JSON files as an expandable grid or table, with XPath/JSONPath search, inline editing, and structural operations (insert, delete, clone) — all applied as real edits to the underlying file, so undo/redo, save, and diff work exactly as they do for any other VS Code editor.
This is an additional way to open .xml and .json files — it never replaces the built-in text editor. Right-click a file tab and choose Reopen Editor With... → XML/JSON Data Grid Viewer, or run the same command from the Command Palette.
Features
- Tree and table views. Any node whose children are all the same shape (e.g. a list of XML elements with the same tag, or a JSON array of objects) renders as a table by default — attributes/keys become columns, nested values become an expandable detail drawer. Toggle any single group back to a tree with the ▦/≡ button, or flip everything at once with Ctrl+Alt+T.
- Two independent searches.
- Ctrl+F — plain text search across tag/key names, attribute/property names and values, and text content. No query syntax required.
- Ctrl+Shift+F — structured search: XPath for XML (
//Status[@Name='Cancelled']), JSONPath for JSON ($.store.books[?(@.price<20)]). Matches are highlighted and auto-revealed even when nested inside a collapsed table drawer; F3 / Shift+F3 jump between results.
- Inline editing. Click any attribute, property, or text value to edit it in place. String/text values can toggle between single-line and multi-line editing.
- Structural edits. Add a child element/attribute (XML) or a property/array item with a chosen type (JSON), clone a node, or delete it (with an inline confirm, since VS Code webviews can't reliably show native
confirm() dialogs).
- Copy path. Every row has a button to copy an XPath or JSONPath expression that resolves back to that exact node — generated in the same style you'd write by hand (
Status[@ID='Cancelled'], $.store.books[2]).
- Format Document. Reformats the whole file with consistent indentation, auto-detected from the file's current style (tabs vs. spaces).
Requirements
None — no external tools or language servers required. XML parsing/editing uses saxes and xpath/@xmldom/xmldom; JSON parsing/editing uses jsonc-parser (the same library VS Code uses to edit settings.json) and jsonpath-plus.
Keybindings
All keybindings are scoped to the grid editor — they don't affect any other editor.
| Key |
Action |
Ctrl+F |
Focus the plain text search box |
Ctrl+Shift+F |
Focus the XPath/JSONPath search box |
F3 / Shift+F3 |
Next / previous search match |
Ctrl+Alt+T |
Toggle table/tree view for every eligible group |
Development
npm install
npm run build # bundle with esbuild
npm run check # tsc --noEmit
npm run watch # rebuild on change
Press F5 in VS Code to launch an Extension Development Host with the extension loaded, or run npx vsce package to produce an installable .vsix.
Sample files for trying out both editors live in sample/.
License
MIT
