Simple JSON Formatter

A simple JavaScript program that formats JSON in a human-readable way. Uses a heuristic approach (no constraint optimization).

JSON is a human- and machine-readable data representation language. However, humans and machines make different spacing and wrapping decisions when writing it. There are many times when developers in industry need to read large JSON objects (e.g. az vm list-skus -l uswest --all), and machine-formatted JSON is often not optimal for human readability.

For example, consider the following simple JSON definition.

[1, 2, 3, [4, 5, [6, 7, 8]], "9"]

The default VSCode JSON formatter will print

Humans write JSON in a more natural and readable way. For example:

[1, 2, 3, [4, 5, [6, 7, 8]], "9"]

[
    1, 2, 3,
    [4, 5, [6, 7, 8]],
    "9"
]

[
    1, 2, 3,
    [
        4, 5,
        [6, 7, 8]
    ],
    "9"
]

Prior Art

Tl;dr - use prettier.

I did some quick Google searching (e.g. "json prettifier site:*.github.io") and looked at a few examples. I wasn't able to find one that fit the above use case. I decided it would take an hour to write my own. So that's what I did.

After writing this, I asked some friends what they use to format JSON:

prettier exists and mostly does the same thing as this
JSTool - https://www.sunjw.us/jstool/npp/ uses a different algorithm

How it works

This program uses a simple heuristic that is good enough in most cases: wrap the top-most elements (closest to the root) first until the subtree can fit on a single line.

The general problem is an optimization problem depending on the metric to optimize (# of lines, # of expansions, etc.). But this program's heuristic works well enough in practical cases.

Object Example

----------------------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
--------------------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
------------------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
----------------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
--------------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
------------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
----------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
--------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
------------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
----------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
--------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
------------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
----------------------------------------------------------------------------
{ "the quick brown fox": { "jumps": "over", "the lazy": ["d", "o", "g"] } }
--------------------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
--------------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
--------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
--------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
--------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
--------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
--------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
------------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": ["d", "o", "g"]
    }
}
----------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d", "o", "g"
        ]
    }
}
--------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d", "o", "g"
        ]
    }
}
------------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d", "o", "g"
        ]
    }
}
----------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d", "o", "g"
        ]
    }
}
--------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
------------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
----------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
--------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
------------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
----------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
--------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
------------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}
----------
{
    "the quick brown fox": {
        "jumps": "over",
        "the lazy": [
            "d",
            "o",
            "g"
        ]
    }
}

Array Example

------------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-----------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
----------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
---------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
--------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
------------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-----------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
----------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
---------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
--------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
------------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-----------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
----------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
---------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
--------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
------------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-----------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
----------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
---------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
--------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
------------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
-----------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
----------------------------------
[1, 2, 3, [4, 5, [6, 7, 8]], "9"]
---------------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
--------------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
-------------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
------------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
-----------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
----------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
---------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
--------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
-------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
------------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
-----------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
----------------------
[
    1,
    2,
    3,
    [4, 5, [6, 7, 8]],
    "9"
]
---------------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [6, 7, 8]
    ],
    "9"
]
--------------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [6, 7, 8]
    ],
    "9"
]
-------------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [6, 7, 8]
    ],
    "9"
]
------------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [6, 7, 8]
    ],
    "9"
]
-----------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
----------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
---------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
--------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
-------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
------------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
-----------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]
----------
[
    1,
    2,
    3,
    [
        4,
        5,
        [
            6,
            7,
            8
        ]
    ],
    "9"
]

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
LICENSE		LICENSE
README.md		README.md
formatter.js		formatter.js
index.html		index.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Simple JSON Formatter

Prior Art

How it works

Object Example

Array Example

About

Releases

Packages

Languages

License

garyg1/json-formatter

Folders and files

Latest commit

History

Repository files navigation

Simple JSON Formatter

Prior Art

How it works

Object Example

Array Example

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages