Awesome

Virtual Json Viewer

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

Browser Store

Manifest Version

The default build for Chrome relies on the new Manifest V3 and requires Chromium version 106 or higher.
If you are running an older version of Chromium because reasons... I got your back! Simpy follow the instructions on how to perform a manual installation using a MV2 release.

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 often 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

Features

• JSON rendering using virtual DOM and collapsible nodes
  • Color-encoded value types
  • Collapse/expand all nodes
  • Preview nested item count for closed nodes
  • Clickable URLs
  • Option to sort JSON keys alphabetically
• 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
• Support JSON Lines
• Download JSON
• Keyboard shortcuts
• Appearance
  • Light/dark mode
  • Custom theme
  • Internationalization

Keyboard shortcuts

🍏 On MacOS Ctrl is replaced by the command key (⌘)

Navigate UI

Toolbar

Tree viewer

Raw viewer

FAQ

Why the extension doesn't work when opening a file from filesystem?

On Chrome

1. go to chrome://extensions/
2. select "Virtual Json Viewer"
3. enable the toggle "Allow access to file URLs"

If this doesn't solve the issue make sure you are using the latest version of both Chrome and Virtual Json Viewer, or manually install the correct build for your version.

Why JQ is not available?

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

Why this valid JQ command doesn't work?

JQ commands in Virtual Json Viewer must return (a list of) 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.

Why the content shown by the extension is different from the actual JSON?

The json content is parsed using Javascript's JSON.parse in order to be rendered both in Tree and Raw view, and even from Download button. For the vast majority of cases this shouldn't be a problem but if you find yourself in need of debugging the original json text I'd suggest you to start praying turn to more suitable tools like API clients and text editors.

Here are some well-known Javascript behaviour that could lead to differences between the original json and its javascript parsed object.

Large numbers are truncated

Integers outside the range Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER are rounded (MDN)

JSON.parse('{"wrong": 10000000000000099}')
{wrong: 10000000000000100}

Floating point numbers are rounded to 16 digits

JSON.parse('{"wrong": 1.12345678901234567890}')
{wrong: 1.1234567890123457}

Keys order is not preserved

Even disabling the alphabetical ordering feature flag there is no guarantee that the order of keys on screen will be the same as the original json. The actual order will be the output of Object.keys(JSON.parse(json)). For instance by ECMAScript specification integer-like keys will be iterated first (MDN)

Object.keys(JSON.parse('{"ZZZ": "_", "AAA": "_", "42": "_"}'))
['42', 'ZZZ', 'AAA']

Unicode escapes are parsed

JSON.parse('{"\u3053\u3093\u306B\u3061\u306F": "\u4E16\u754C"}')
{'こんにちは': '世界'}

Manual Installation

Get the build

I'm confused, which manifest version should I get?

Note: the only differences are in the manifest. The underlying extension code is the same for all builds

From Release

Download the latest build from the release page and extract the content

• virtual-json-viewer-{version}: Chrome manifest V3
• virtual-json-viewer-{version}-mv2: Chrome manifest V2
• virtual-json-viewer-{version}-firefox: Firefox (manifest V2)

From source

cd extension
yarn install

yarn build          # Chrome  - Manifest V3
yarn build-mv2      # Chrome  - Manifest V2
yarn build-firefox  # Firefox - Manifest V2

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

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.

Contributing

Bug fix

Ooops! Just open an issue with detailed description of what happened and how to reproduce it... Or go for it and 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 v1.0.0
• Macbook Pro 16 (2019) 2,6 GHz 16 GB
• Chrome 106.0.5249.119
• 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. From "Performance insights" tab click "Measure page load"
  3. Take the "Largest Contentful Paint" (LCP)

Results

References

License

MIT License. See also LICENSE file.