View and edit JSON files as an interactive, collapsible tree — syntax highlighting, search/filter, copy value & path, inline editing of keys and values, add/delete nodes, expand/collapse all.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
View .json and .jsonc files as an interactive, collapsible tree, built natively for VS Code.
Features
Inline editing: click any key or value to edit it. Values are parsed as JSON literals (42, true, null, "text"). Enter commits, Esc cancels. Changes are saved back to the file.
Add / delete nodes: ＋ adds a property/item to a container, 🗑 deletes a node.
Collapsible tree with expand-all / collapse-all.
Syntax highlighting that follows your VS Code theme (keys, strings, numbers, booleans, null).
Search & filter keys and values; matches and their ancestors stay visible.
Copy value and copy path (JSONPath-style, e.g. $.users[0].name) on every node.
Light / dark toggle plus automatic theme matching.
Tolerant parsing: supports .jsonc comments and trailing commas.
Raw text button to jump back to the normal editor.
Usage
Right-click a .json file in the Explorer → Open with Pepe JSON Viewer, or
Open a JSON file and run Pepe JSON Viewer: Open from the Command Palette, or
Use the editor title-bar action.
Make it the default viewer (optional)
Add this to your settings.json to open all JSON files in the viewer automatically:
