Pepe JSON Viewer

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

1. Right-click a .json file in the Explorer → Open with Pepe JSON Viewer, or
2. Open a JSON file and run Pepe JSON Viewer: Open from the Command Palette, or
3. 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:

"workbench.editorAssociations": {
  "*.json": "jsonViewerPro.viewer"
}

To edit a file as plain text afterwards, use Reopen Editor With… → Text Editor or the Raw text button.

License

MIT