json-viewer: a Chrome extension that prints JSON as something readable

Detection by content, not by URL

The json-viewer extension is described as the most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen, and it is a Chrome extension for printing JSON and JSONP. That is the whole product in one sentence, and the interesting engineering is in how it decides what to highlight.

The feature list says URL does not matter, and the content is analysed to determine if it is a JSON or not. That is the design decision that separates it from the built-in Chrome JSON viewer, which activates on a path pattern. Content-based detection means any endpoint that returns JSON gets the treatment, whether it lives at /api/users or at a path that looks like a page, and it means a JSON endpoint served from a URL with a query string or a path parameter still works.

The same principle shows up in the two hot word features. Typing json in the console inspects your JSON typing json in the console, and typing json-viewer plus TAB in the omnibox lets you paste JSON straight into the address bar, press ENTER, and have it highlighted. Both are ways of getting to the renderer without having a URL that serves JSON.

The project is MIT licensed, the primary language is HTML, the default branch is master, and the last push to the repository was on 2026-10-17. There are no GitHub releases, and the extension is distributed through the Chrome Web Store, where the listing is under the id gbmdgpbipfallnflgajpaliibnhdgobh. The author is Tulio Ornelas, and the repository carries a logo.png and a logo.svg along with the extension itself.

The feature list, which is a settings catalogue

The feature list is long enough to read as the options page, and it groups into three kinds of thing.

The rendering options are syntax highlighting, twenty-seven built-in themes, collapsible nodes, clickable URLs as an optional extra, an option to show line numbers, an option to customise the theme, an option to customise the tab size, an option for C-style braces and arrays, and an option to configure a maximum JSON size to highlight. That last one is a practical guard, because a very large document is where a highlighter starts to cost more than it is worth.

The detection and handling options are more interesting. It works with numbers bigger than Number.MAX_VALUE, which is the kind of detail that only appears when someone has a JSON document with a large integer and found it mangled. There is a toggle button to view the raw version against the highlighted one, so the extension never hides what the server actually sent, and there is an option to include a header with timestamp and url, which is useful when you are looking at a response and want to know when it was fetched.

The editing and structure options are an option to allow the edition of the loaded JSON, an option to sort json by keys, an option to disable auto highlight, and an option to collapse nodes from second level plus a button to unfold all collapsed nodes. The collapse-from-second-level option is the one that shows the intent, because the first level of a JSON document is usually the thing you want to read as a whole, and the depth below it is the thing you want folded away.

Then there is the scratch pad, a new area where you can type or paste JSON and format it indefinitely using a button or a key shortcut, reached by typing json-viewer plus TAB plus scratch pad and pressing ENTER. That is the feature that turns a viewer into a tool, because most of the time you want to see some JSON you have in a file or on your clipboard rather than a URL that serves it.

The extension ecosystem conflict, and the Chrome permission caveats

The notes at the top of the README are the practical warnings, and they are all consequences of how Chrome extensions work rather than of anything the project did.

The first is that this extension might crash with other JSON highlighters and formatters, and you may need to disable them. Two extensions that both intercept and rewrite the response body will fight over it, and the usual resolution is to turn one off.

The second is that to highlight local files and incognito tabs you have to manually enable these options on the extensions page, and the third is that works on local files if you enable it in chrome://extensions. The permission has to be granted per feature rather than granted once, and Chrome revoking an option after an update is a known behaviour that the README describes: sometimes when the plugin updates Chrome leaves the old background process running and revokes some options, like the access to local files, and when this happens you just recheck the option and everything works again.

That last note is a good example of a project documenting the browser's behaviour honestly rather than pretending it does not happen. The fix is a checkbox, but the reason the checkbox is off after an update is a Chrome quirk that no extension can control.

Building it yourself, and the toolchain it is stuck with

The extension is available from the Chrome Web Store, and the alternative is to build it from source and load it unpacked. The steps are:

1. It depends on node (version in `package.json` engines).
2. `npm install --global yarn`
2. `yarn install`
3. `yarn run build`
4. Open Chrome and go to: chrome://extensions/
5. Enable: "Developer mode"
6. Click: "Load unpacked extension"
7. Select: "build/json_viewer" directory.

The output is a directory named build/json_viewer, which is what you select in the load unpacked dialog, and the webpack config and the release script in lib/ produce it.

The dependency list in the package manifest explains why this project is stuck on an old toolchain, and it is worth reading as a piece of history. Webpack is at 1.15.x, extract-text-webpack-plugin at 0.8.x, css-loader at 0.14.x, and node-sass at 4.5.3, with CodeMirror at 5.21.x for the editor. Those are versions from the middle of the last decade, and they are pinned rather than floating, which means the build will not run on a current Node without work.

The build script itself is two parts: webpack with the progress and colors flags, and then node ./lib/release-script, which is the step that assembles the loadable extension directory. The release script is what the release npm script calls with NODE_ENV=production in front of the build.

JSONP, which is the forgotten part of the format

The extension handles JSONP as well as JSON, and the README includes a JSONP example URL, pointing at a curators endpoint with a callback parameter set to test.

JSONP is the pre-CORS technique, where a server wraps its JSON payload in a function call and the browser loads it as a script, which sidesteps the same-origin policy because the response is executed as JavaScript rather than parsed as data. The extension renders the JSONP payload as JSON, which is a small convenience, since the raw response is a function call that no JSON viewer would parse correctly.

The try-it-on list is also a useful compatibility check for a reader. There are GitHub API endpoints, a Facebook graph endpoint, the gists public endpoint, a large GeoJSON file from a public examples repository, and a Takealot product listing with a long query string. The large GeoJSON link is the interesting one, because it is the case that exercises the maximum size option, and the long query string exercises the detection when the URL has parameters that do not look like a file.

Note the two near-identical GitHub links in that list, one of which has a typo in the scheme with only one slash. That is not an accident of the documentation, it is a test case, and a well-chosen one: a malformed URL that a naive extension would reject before it ever looks at the content.

Editorial conclusion

Adopt json-viewer if you browse APIs in Chrome and want collapsible, themed JSON without opening a separate viewer. Do not adopt it if you need the same rendering outside the browser, since it is a Chrome extension. Verify first that the JSON you are viewing is served as a text type the extension can intercept, since detection is based on the content and the URL does not matter.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. Project website
4. README
5. tulios/json-viewer on GitHub