diff --git a/README.md b/README.md index 88ecc79..d669f20 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,68 @@ -# React + TypeScript + Vite +# JSON Visualiser -This template provides a minimal setup to get React working in Vite. \ No newline at end of file +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: +👉 **[https://json-visualiser.onixbyte.dev](https://json-visualiser.onixbyte.dev)** + +## New Features + +* **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. + +### Installation + +1. Clone the repository + ```bash + git clone https://github.com/onixbyte/json-visualiser.git + cd json-visualiser + ``` + +2. Install dependencies + + ```bash + pnpm install + ``` + +3. Run the development server + + ```bash + pnpm dev + ``` +--- +*Developed with a focus on type safety and user experience.*