fjcero / json-viewer

JSON browser extension with search and JQ filtering

Virtual Json Viewer

Browser plugin that uses virtual DOM to render JSONs with built-in search, JQ filtering* and many other features.

Browser Store

Why?

"Oh my! There are plenty of json viewers, why making a new one?"

Rightful question, and the answer is quite simple: the others weren't good enough [for my needs].

I am a backend developer and in my everyday job I have to debug large json payloads, so large that every other plugin for chrome I tried freezed without showing any content.

"Good for you, but my payloads are small, pretty and strawberry flavoured"

That's ok, if you are happy with your current plugin, no need to change.

And if you want to come back later don't worry, we'll still be here, with blazing fast loading time, built-in search, JQ filtering and many other features... but no strawberries, sorry

Manual Installation

Get the build

From Release

1. Download the latest build from the release page
2. Extract the content

From source

cd extension
yarn install
yarn build

Install the extension

Chrome

1. Open the Extension Management page by navigating to chrome://extensions
2. Enable Developer Mode by clicking the toggle switch next to Developer mode
3. Click the load unpacked button and select the build directory

Firefox

Open the manifest.json inside the build directory and add a custom extension id (but why?)

"browser_specific_settings": {
  "gecko": {
    "id": "[e-mail]"
  }
}

Disable native json viewer

1. Go to about:config
2. Search for devtools.jsonview.enabled
3. Set to false

Load extension

1. Go to about:debugging
2. Click "This Firefox"
3. Click "Load Temporary Add-on" and select the build directory

Note: The extension is automatically removed when Firefox is closed and must be manually loaded on next start.

Others

The extension has not been tested on other browsers, but should work on any chromium browser.

Features

• JSON rendering using virtual DOM and collapsable nodes
  • Sort JSON keys alphabetically
  • Preview nested item count for closed nodes
  • Color-encoded value types
  • Collapse/expand all nodes
  • Clickable URLs
• Full text search
  • Highlight search results
  • Option to completely hide subtrees without any search match
  • Option to enable case sensitive search
• JQ filtering
• Raw JSON viewer
  • Prettify/minify
• Download JSON
• Dark mode
• Internationalization
• Customizable settings

Notes on JQ

JQ is not available on all websites

JQ has been compiled to WebAssembly and included in this plugin, but some website's Content Security Policy doesn't allow WASM execution. In those cases the JQ command bar is not shown.

Example: https://api.github.com/users/paolosimone/repos

See also Issue #15

JQ command must return a valid json

JQ commands in Virtual Json Viewer must return valid json, otherwise the parsing of the result will fail with an error e.g.

Unexpected token { in JSON at position 337

Why? The core feature of Virtual Json Viewer is the navigation of (possibly large) json thanks to virtual DOM that allows on-demand rendering. JQ filtering has been added on top of that, just as handy utilities to further improve the user experience.

Example

Let's say we want to extract all the page titles from this Wikipedia search.

.query.search[].title will fail because a sequence of strings is not a valid json:

"Pizza"
"Hawaiian pizza 😱"
"History of pizza"
"Pizza Margherita"
...

We should use .query.search | map(.title) instead to obtain a json array:

[
  "Pizza",
  "Hawaiian pizza 😱",
  "History of pizza",
  "Pizza Margherita",
  ...
]

okok, the scream emoji was added by me

Contributing

Bug fix

Ooops! Just open an issue with detailed description of what happened and how to reproduce it... Or just open a PR with the patch if you are brave enough!

Feature request

In general I'd rather keep the feature set of Virtual Json Viewer small and well defined, but if you have a proposal feel free to open an issue and we will discuss it.

Translation

New languages are welcome, open a PR and follow these steps.

Translation files are in json format (yo dawg!) and are located in the translation folder extension/src/viewer/localization/translations.

To add a new language:

1. Make a copy of the en.json translation file and rename it with the ISO 639-1 two-letter code of the new language (e.g. es.json for Spanish)
2. Translate all the values in the new translation file
3. Register the new language by adding it to the enum (and other structures) inside extension/src/viewer/localization/Localization.ts

Local development

Run yarn start to serve the extension as a web app with hot reload.

Always yarn format before creating a commit.

Performance

Disclaimer: this is NOT a formal benchmark, just a few tests with syntethic data to give an idea of loading performance time.

Setup

• Virtual Json Viewer v0.1.0
• Macbook Pro 16 (2019) 2,6 GHz 16 GB
• Chrome 95.0.4638.69
• Jsons are randomly generated using this script (fixed dept: 10)
• Files are loaded from disk
• Load time recorded with Chrome DevTool
  1. Open file in chrome
  2. Click "Start profiling and reload page"
  3. Take the end of the last frame

Results

Siblings per level	File Size	Load time
110	~100 KB	~250 ms
1100	~1 MB	~350 ms
11000	~10 MB	~1200 ms
110000	~100 MB	~10 s

References

Tool	Usage
anchorme	Convert URLs to clickable HTML links
cra-template-complex-browserext-typescript	Project scaffolding, huge help!
customize-cra	Break webpack config, then fix it
jq-wasm	JQ in the browser
json-stable-stringify	Sort keys on JSON serialization apparently is rocket science
React	Learn how to write a frontend application without jQuery and bootstrap
react-vtree	Render the JSON. I'd say it's a pretty important role
TailwindCSS	Prevent me from touching CSS files
Typescript	Try to forget I'm actually writing JS 🤢
uid	Fast generation of unique keys for React lists
vscode-icons	Keep UI buttons clean and intuitive

License

MIT License. See also LICENSE file.