Home

Awesome

JSON Formatter - the original

Chrome extension that auto-formats JSON when you view it in a browser tab.

Features

*Typing json the in console is not working since Manifest v3. If you need a workaround, paste this snippet into the console:

json = JSON.parse(document.getElementById("jsonFormatterRaw").querySelector("pre").innerText)

Some JSON documents for testing it on: https://callumlocke.github.io/json-formatter/

Installation

Option 1 (recommended) – Install it from the Chrome Web Store.

Option 2 – Install it from source (see below).

Development

Requirements: Deno (and Node for now).

Initial setup:

To build it:

To build and rebuild whenever files change:

To install your local build to Chrome

FAQ

Why are large numbers not displayed accurately?

This is a limitation of JavaScript and therefore a limitation of JSON as interpreted by your web browser.

It's not JSON Formatter doing this, it's the native JSON.parse in V8. JSON Formatter shows you the parsed values, exactly the same as what you'll see after loading the JSON in JavaScript.

If your API endpoint really needs to represent numbers outside JavaScript's safe range, it should quote them as strings.

Why are object keys sometimes in the wrong order?

What you see in JSON Formatter is a representation of the parsed object/array. It's the same order you'll get with Object.keys( JSON.parse(json) ) in JavaScript.

Historically, the JavaScript standard explicitly stated that object keys can be iterated in any order, and V8 took advantage of this by moving numeric string keys (like "1" or "99999") to the top to facilitate a small performance optimisation. This V8 implementation detail has since become standardised.

But I just want to see exactly what the server spits out

For now, your best option is to just use the "Raw" button to see the raw JSON. This is what the server sent. The "Parsed" buttons represents what you'll get from JSON.parse.

In future JSON Formatter might switch from using JSON.parse to a custom parser (if performance allows) in order to detect when a value has been 'changed' by parsing and show an appropriate warning.