Browser plugin that uses virtual DOM to render JSONs with built-in search, JQ filtering and many other features.
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.
"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
- 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
- Download JSON
- Keyboard shortcuts
- Appearance
- Light/dark mode
- Custom theme
- Internationalization
π On MacOS Ctrl is replaced by the command key (β)
| 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 |
| Action | Primary | Secondary |
|---|---|---|
| Toggle Tree/Raw viewer | Ctrl + i |
|
| Expand | Ctrl + e |
|
| Collapse | Ctrl + Shift + e |
|
| Save | Ctrl + s |
| 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 |
| Action | Primary | Secondary |
|---|---|---|
| Select all text | Ctrl + a |
|
| Deselect text | Escape |
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.
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 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[].title] instead to obtain a json array:
[
"Pizza",
"Hawaiian pizza π±",
"History of pizza",
"Pizza Margherita",
...
]ok ok, I added the scream emoji
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.
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}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']JSON.parse('{"\u3053\u3093\u306B\u3061\u306F": "\u4E16\u754C"}')
{'γγγ«γ‘γ―': 'δΈη'}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
Download the latest build from the release page and extract the content
virtual-json-viewer-{version}: Chrome manifest V3virtual-json-viewer-{version}-mv2: Chrome manifest V2virtual-json-viewer-{version}-firefox: Firefox (manifest V2)
cd extension
yarn install
yarn build # Chrome - Manifest V3
yarn build-mv2 # Chrome - Manifest V2
yarn build-firefox # Firefox - Manifest V2- 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
builddirectory
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
builddirectory
Note: The extension is automatically removed when Firefox is closed and must be manually loaded on next start.
The extension has not been tested on other browsers, but should work on any chromium browser.
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!
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.
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.jsontranslation file and rename it with the ISO 639-1 two-letter code of the new language (e.g.es.jsonfor 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
β I won't accept money in exchange for change/feature requests.
πΊ If you still want to share a beer as appreciation for my work, go ahead and smash the donate button!
Run yarn start to serve the extension as a web app with hot reload.
Always yarn format before creating a commit.
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
- Open file in chrome
- From "Performance insights" tab click "Measure page load"
- 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 |
| 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 |
MIT License. See also LICENSE file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent