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

Keyboard shortcuts

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

Navigate UI

Action	Primary	Secondary
Focus Next element	`Tab`
Focus Previous element	`Shift + Tab`
Trigger button	`Enter`
Focus Search	`Ctrl + f`	`/`
Focus JQ	`Ctrl + Shift + f`
Focus Viewer	`Ctrl + 0`

Toolbar

Action	Primary	Secondary
Toggle Tree/Raw viewer	`Ctrl + i`
Expand	`Ctrl + e`
Collapse	`Ctrl + Shift + e`
Save	`Ctrl + s`

Tree viewer

Action	Primary	Secondary
Start navigation	`Enter`
End navigation	`Escape`
Go to next	`ArrowDown`	`j`
Go to previous	`ArrowUp`	`k`
Go to next page	`PageDown`	`Shift + j`
Go to previous page	`PageUp`	`Shift + k`
Go to first	`Home`	`gg`
Go to last	`End`	`Shift + g`
Open node	`ArrowRight`	`l`
Close node	`ArrowLeft`	`h`
Toggle node open/close	`Spacebar`
Select key text	`Shift + ArrowLeft`	`Shift + h`
Select value text	`Shift + ArrowRight`	`Shift + l`
Select node text	`Ctrl + a`

Raw viewer

Action	Primary	Secondary
Select all text	`Ctrl + a`
Deselect text	`Escape`

FAQ

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

On Chrome

go to chrome://extensions/
select "Virtual Json Viewer"
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

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?

Browser	Manifest
Chrome 106+	V3
Chrome (older)	V2
Firefox	V2

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

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

Firefox

Disable native json viewer

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

Load extension

Go to about:debugging
Click "This Firefox"
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:

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)
Translate all the values in the new translation file
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

Siblings per level	File Size	Load time
110	~100 KB	~300 ms
1100	~1 MB	~350 ms
11000	~10 MB	~900 ms
110000	~100 MB	~8000 ms

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-color	Easily edit the custom theme and, more importantly, looking professional while doing it
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.

Name		Name	Last commit message	Last commit date
Latest commit History 73 Commits
assets		assets
extension		extension
samples		samples
LICENSE		LICENSE
README.md		README.md

License

paolosimone/virtual-json-viewer

Folders and files

Latest commit

History

Repository files navigation

Virtual Json Viewer

Browser Store

Manifest Version

Why?

Features

Keyboard shortcuts

Navigate UI

Toolbar

Tree viewer

Raw viewer

FAQ

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

Why JQ is not available?

Why this valid JQ command doesn't work?

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

Large numbers are truncated

Keys order is not preserved

Unicode escapes are parsed

Manual Installation

Get the build

From Release

From source

Install the extension

Chrome

Firefox

Others

Contributing

Bug fix

Feature request

Translation

Local development

Performance

References

License

About

Resources

License

Stars

Watchers

Forks

Releases 20

Languages