A sophisticated, TypeScript-powered tool designed to parse JSON data and visualise **JSONPath** queries with precision. This tool allows developers to navigate complex data structures, highlight specific fields, and extract data efficiently.
## Access the App
You can use the live version of the application directly in your browser:
* **Interactive Tree Navigation**: Nodes can now be expanded or collapsed, making it easier to manage and analyse large, deeply nested JSON objects.
* **One-Click Extraction**: Seamlessly copy the data selected by your JSONPath expression to your clipboard with a single click.
* **Precise Highlighting**: Visual cues (using Tailwind CSS rings and background colours) indicate exactly which fields match your query.
## Overview
Working with large data responses can be cumbersome. This visualiser provides a structured "Live Preview" that mirrors the hierarchy of your data while allowing you to isolate and extract the information that matters most.
## Technical Details
### Collapsibility Logic
The tree component uses a recursive structure where each object or array node maintains its own local `isOpen` state. This ensures that toggling one section of the data does not interfere with the rest of the tree.
### Data Extraction
By utilising `jp.query(parsedJson, expression)`, the application gathers all matching values into a result array, which is then formatted and copied to the system clipboard using the modern `navigator.clipboard` API.
## Usage
1.**Paste** your JSON into the source editor.
2.**Enter** your JSONPath (e.g., `$..staff_members[?(@.active)]`).
3.**Navigate** the tree by clicking the expansion icons next to objects and arrays.
4.**Copy** the matching results using the "Copy Matches" button to use the filtered data elsewhere.
## Privacy & Security
We take data privacy seriously. **Your data never leaves your machine.**
***Local Processing**: All JSON parsing and JSONPath queries are performed locally within your browser.
***No Server Uploads**: The source code contains no functionality to upload your JSON data to any external servers, including our hosting provider (Vercel).
***Secure Environment**: You can safely use this tool with sensitive configuration files or API responses without risk of data exposure.
## Getting Started
### Prerequisites
Ensure you have Node.js installed on your machine.
