Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>json mateNew to Visual Studio Code? Get it now.
json mate

json mate

Bhanu Bhanot

|
15 installs
| (0) | Free
Provides tree visualization, searching, filtering, and side-by-side comparison of JSON data.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

JSON Mate VS Code Extension

A Visual Studio Code extension to view and search JSON data with a tree view and filtering capabilities. It also supports comparison of two JSON files side by side with difference highlighting.

Features

  • Tree View: Visualize JSON data in a collapsible tree structure.
  • Search: Filter JSON keys and values by text search.
  • Property Filtering: Select which JSON properties to display using a filter dropdown with checkboxes.
  • Comparison View: Compare two JSON files side by side.
  • Show Differences Only: Option to display only differing nodes between two JSON files.
  • Sync Scrolling: Synchronize scrolling between JSON text areas and tree views in comparison mode.
  • Layout Toggle: Switch between horizontal and vertical layouts in comparison view.
  • Live Editing: Supports live editing of JSON in the text area with real-time updates in the tree view.

Usage

Open JSON File

  • Use the command palette (Ctrl+Shift+P or Cmd+Shift+P) and run the command: Open JSON File.
  • Select a JSON file to open.
  • The JSON will be displayed in a tree view with search and property filtering options.
  • After opening a JSON file, you can edit the JSON directly in the text area. The tree view will update live to reflect your changes.

Compare JSON Files

  • Use the command palette and run the command: Compare JSON files.
  • Select exactly two JSON files to compare.
  • The extension will display the two JSON files side by side with options to show only differences, sync scrolling, and toggle layout.
  • JSON can also be edited directly in the comparison text areas, with live updates reflected in the tree views.

UI Overview

  • Tabs: Switch between "Tree View" and "Comparison View".
  • Search Box: Filter keys and values by text.
  • Filter Properties Dropdown: Select which properties to show/hide in the tree view.
  • Comparison Controls: Options to show only differences, sync scrolling, and toggle layout orientation.

Requirements

  • Visual Studio Code version 1.60.0 or higher.

Extension Settings

No additional settings are required.

Known Issues

  • Filtering by properties excludes unchecked properties and their subtrees.
  • Invalid JSON input will not render the tree view.

Release Notes

0.0.1

  • Initial release with JSON viewing, searching, filtering, and comparison features.

License

MIT License

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft