jsonpath-visualizer

Visualize JSON with JSONPath querying

✨ Demo

What it does?

• Reads a JSON file and renders a beautiful tree visualization
• Supports JSONPath querying to highlight matching nodes
• Allows inspection of individual nodes/node-ranges
• Theming!: Choose from 37 awesome themes styled with base16

Implementation

• Built with TypeScript, React.js with Redux state management
• Tree rendering done using react-json-tree. A fork of the react tree component used by redux-devtools(https://github.com/reduxjs/redux-devtools/blob/master/packages/)
• Progressive rendering, to handle large JSON. Nodes are rendered upto a limit, while the rest of the nodes are rendered as node ranges. Matching nodes are highlighted and expanded. Matching node-ranges are highlighted and expandable. The idea is to highlight matching nodes/node paths, without having to render way too many nodes. Thresholds:
  • Collection limit: 30 (The number of nodes that will be rendered in a collection before rendering them in collapsed ranges)
  • Query limit: 5000 (A maximum of 5000 matching nodes will be returned per query)
• JSON files are read using the FileReader API

Further improvements?

• JSON streaming for huge files that can't be read/parsed in-memory
• Introduce a service worker to handle querying, so as to keep the main thread responsive in case the computation is super expensive
• Tests!
• I'm sure there could be lots more...

Install

yarn install

Usage

yarn start

Run tests

yarn test

Author

👤 itsfadnis nik.fadnis@gmail.com

• Twitter: @itsfadnis
• Github: @itsfadnis

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator