Improved version of dutchigor:json-grid-viewer this extension allows you to get a view and edit the content of a JSON file by showing it in a resizable grid.
Features
Interactive JSON editing capabilities
Columns are resizable
Each object and array is collapsed by default but can be expanded to see all contents
Arrays of objects show in a table format
Add new properties to objects and items to arrays
Modify existing values with inline editing
Copy JSON content to clipboard with one click
Demo
Usage
To open a JSON file in the grid editor, right click the file, select Open With... > JSON Grid.
Editing Features
Edit values: Double-click on any primitive value (string, number, boolean, null) to edit it inline
Add object properties: Use the "Add property" button when object is expanded
Add array items: Click the + button next to an array or use the "Add item" button when array is expanded
Remove properties/items: Click the × button next to properties or array indices
Rename object properties: Double-click on any property key to rename it
Change value types: When editing null values, you can select a new type from the dropdown
Copy to clipboard: Click the "Copy to Clipboard" button to copy the entire JSON content
All changes are automatically saved to the file.
Build Extension
npm install
npm run build
npm run vscode:prepublish
vsce package
