/jsonpath-visualizer

Visualize JSON with JSONPath querying

Primary LanguageTypeScript

jsonpath-visualizer

Version License: MIT Twitter: itsfadnis

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

🤝 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