Fast and flexible JSON viewer.
JSON Navigator Extension
Live demo: https://r55man.com/json-navigator/
* FAST FAST FAST. Nothing else compares. Supports 100MB+ file sizes. Loads files virtually instantly.
* JSON Burrowing!!! This powerful feature allows you to quickly descend into deep hierarchies of data without becoming overwhelmed with content on the screen. Clickable JSON Path Bar to instantly navigate to any point in the current hierarchy. Works with the browser's native forward/back buttons to quickly navigate the JSON tree, and allows you to open subtrees in new tabs and/or windows.
* The on-screen control panel gives instant access to tons of useful features:
- Toggleable raw JSON view.
- Toggleable null value hiding. Null value hiding cascades upwards from all-null children.
- Toggleable bold keys.
- Toggleable byte counts: shows how much data is inside a given hierarchy.
- Toggleable array sizes and object item counts.
- Toggleable key sorting.
- Toggleable color-coded depth guides.
- Toggleable auto-expand.
- Toglleable HTML Markup.
- Toggleable hyperlink conversion.
- Toggleable line wrapping.
- Toggleable dark/light mode.
- Configurable indent depth.
- Configurable auto-expand and click-to-expand depth.
- Configurable line spacing.
- Configurable multi-level expand on all objects and arrays.
- Configurable fonts and font sizing. Console fonts and JSON code fonts are independently configurable.
* Furthermore, each entry in the JSON file has it's own menu giving you powerful navigation tools:
- Collapse-all-children feature on all objects and arrays.
- Expand-all-children feature on all objects and arrays.
- One-click copy-to-clipboard on all non-null values.
- Smart clipboard omits null entries when \"Show Nulls\" is turned off.
- \"Burrow\" link, opening this key/val pair isolated from the rest of the document.
* One-click in-app documentation.
* Full Internationalization support. Controls and documentation are available in six languages:
- English
- French
- German
- Spanish
- Russian
- Chinese
* No-clutter display omits syntax operators and allows you to turn off the header and footer.
* Full set of keybindings for easy keyboard navigation.
* Settings saved between sessions.
* Multiple Dark Mode and Light Mode themes to chose from.
* Works on local files as well as remote.
## Known Issues :: To be addressed before v1.0
- Key sorting is buggy. It gets keys mixed up when the tree is expanded more than a couple levels deep.
- Wrapped lines shift jarringly when the item menu is displayed. The item menu should not trigger a reflow of wrapped lines.
- \"Show Bytes\" incurs a 25-50% overhead in JSON processing time, which gets progressively worse as the data gets shallower. On small files (less than 1MB) this increase is unnoticeable, but it gets worse the larger the files get. Currently there is no way to prevent this overhead; turning off \"Show Bytes\" will still incur the penalty, the bytes just won't be displayed. This will be addressed in a future (pre 1.0) release.
- The controls next to object/arrays need to be better documented, explaining what they do and how they tie into \"Expand Depth\". In fact, the entire program needs to be better documented :/
- The search bar is rather flaky in its interaction with other functions at the moment. Searching from the root level generally works as expected, but searching from subtrees is bugged. The search UI is primitive and unintuitive, and does not allow for any kind of search customization, e.g. key/val/key+val matching ability to search by substring vs regex, etc. In general, search needs a lot of work before it's production-quality.
- In the UI, cascading nulls only trigger once you uncover nulls deep enough to reveal that all the children are null. This will eventually be need to fixed, perhaps by pre-scanning the initial JSON file to reveal all the nulls when the document loads.
- There are currently only a handful of themes and fonts to choose from, and no way to add your own. A theme editor will soon be available, making it simple to design custom themes and add custom fonts.
- There is no way to configure the plugin to work with mime types other than application/json, or to key off of filename extension, or to force-convert a page that you know has JSON data but the browser insists on rendering itself. These issues will be addressed in an upcoming release.
- Large arrays (1000+ elements) result in a slow UI and are pretty much useless in terms of finding data. There should instead be a configurable cutoff length, with progressive/selective display of additional items.
- There needs to be a live demo. People don't trust a random extension with 10 users :) The code is in the process of being refactored to work outside of a browser environment.
## Known Non-Issues :: These are not bugs
- There are no line numbers and no plans to include them, as it is difficult to find a compelling case for them in the context of a JSON file. The line numbers would not match those of the original file due to the formatting conversion, and therefore would be meaningless.
- The raw view would look better if it were marked up (c.f. highlight.js), but unfortunately syntax highlighters bomb on large files because they create an ungodly number of nodes. The raw view is already slow, taking several seconds to render on large files. Syntax highlighting would bring this to a crawl.
## Post-1.0 Ideas
- Logic layer for building a custom UI around the JSON files.
- Editing and saving, in conjunction with the logic layer.
- File import / export / upload / download.
Source Manifest.json
How to download and manually install JSON Navigator extension for Chrome
Looking for a way to install JSON Navigator extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.
However, you may need to install JSON Navigator extensions manually, this article outlines two simple methods to effortlessly install JSON Navigator extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.
Method 1: Download JSON Navigator extension and manually install through Drag &Drop
If you ever need to manually install a JSON Navigator extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.
Step 1: Download the JSON Navigator Extension by clicking the "Download CRX" button on the website.
Look for the JSON Navigator extension you wish to install. Go to the website and download the JSON Navigator extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for JSON Navigator extension that contains all the data.
Step 2: Extract &Arrange Files
Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.
Step 3: Go to the Chrome Extensions Page
Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.
Step 4: Drag and Drop the Extension
Now, go to the folder where you extracted the JSON Navigator extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.
Step 5: Complete the Installation
Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.
Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.
Method 2: Download JSON Navigator extension for Chrome and install in Developer Mode
This is another method to install JSON Navigator extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.
Step 1: Download the JSON Navigator extension file
Select and download the JSON Navigator extension by clicking the 'Download CRX' button on the website.
Step 2: Extract the downloaded contents
Convert the file to a ZIP file if it is in CRX format then extract the JSON Navigator extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your JSON Navigator extension running.
Step 3: Open Chrome Extension Setting Page
In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.
Step 4: Enable Developer Mode
After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.
Step 5: Load the Unpacked Extension
Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."
Step 6: Select the Extension Folder
Once the pop-up opens upon clicking Load unpacked, select the JSON Navigator extension directory and click on the "Select Folder "button.
Step 7: Confirm and Install
After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.
Conclusion
Here we've made a step-by-step guide on How to manually install JSON Navigator extension in 2 ways. We hope this guide proves helpful.
Similar Extensions
JSON Viewer Pro 57 137 ★ 349KiB
JSON-As-Table Viewer 57 9 ★ 616KiB
Seven JSON Viewer 57 8 ★ 228KiB
JSON Formatter 57 33 ★ 102KiB
Functional JSON viewer 57 2 ★ 54.79KiB
JSON Viewer 57 45 ★ 140KiB
Code Formatter - JSON, CSS & JavaScript 57 15 ★ 1.38MiB
JsonDiscovery 57 44 ★ 255KiB
JSON Beautifier and Editor 57 36 ★ 450KiB
JSON Hero 57 7 ★ 868KiB
Mark tab manager 57 32 ★ 47.08KiB
JSON Lite 57 56 ★ 23.65KiB
Virtual Json Viewer 57 8 ★ 553KiB
JSON Formatter 57 4 ★ 194KiB
DJSON. JSON Viewer & Formatter 57 68 ★ 126KiB
JSON Editor 57 2 ★ 380KiB
find+ | Regex Find-in-Page Tool 57 132 ★ 112KiB
Just JSON Viewer 57 2 ★ 70.29KiB
Byte Buddy 57 3 ★ 1.52MiB
TABLERONE tab manager 57 827 ★ 4.11MiB
Super PiP - Picture-in-Picture with playback controls and subtitles 57 214 ★ 28.45KiB
JSON Formatter 57 65 ★ 40.9KiB
JSON Dark Mode Viewer 57 3 ★ 292KiB
JSON RPC Chrome Viewer 57 14 ★ 122KiB