Making Pretty-Printed JSON Readable Again in JavaScript

#json #javascript #webdev #programming

Most JSON serializers give you only two choices:

compact machine output:

{"a":{"b":{"c":"abc"}},"x":{"y":{"z":"xyz"}}}

or fully expanded “pretty-print”:

{
  "a": {
    "b": {
      "c": "abc"
    }
  },
  "x": {
    "y": {
      "z": "xyz"
    }
  }
}

I wanted something in between: the first is hard for humans to scan, and the second becomes extremely verbose on real-world nested data.

The Idea

I wrote a small JavaScript module called jsonfold. Instead of replacing JavaScript's JSON serializer, it works as a lightweight post-processing filter on top of JSON.stringify() output.

The formatter selectively:

folds small containers back onto one line,
packs short scalar sequences,
keeps large or complex structures expanded.

Example output:

{
  "a": { "b": { "c": "abc" } },
  "x": { "y": { "z": "xyz" } }
}

Why This Approach?

I did not want to rebuild a serializer. JavaScript already provides an excellent serializer in JSON.stringify(), including support for custom transformations through the replacer callback and configurable indentation.

The formatter can be used either as a streaming filter or through convenience wrappers that behave similarly to JSON.stringify().

import { stringify } from "@jsonfold/core";

const data = {
  a: { b: { c: "abc" } },
  x: { y: { z: "xyz" } }
};

console.log(stringify(data));

That means you can continue using the standard JavaScript serialization pipeline while producing more compact and readable output.

Customization

The formatter allows controlling:

maximum line width,
folding depth,
packing aggressiveness,
array/object limits.

So you can choose between conservative formatting and more aggressive compaction.

Full Article:

Medium (no paywall): A Streaming JSON Formatter for JavaScript that Works with JSON.stringify

Minimal Usage

Install:

npm install @jsonfold/core

import { dump } from "@jsonfold/core";

const data = {
  meta: { version: 1, ok: true },
  ids: [1, 2, 3, 4, 5],
  items: [
    { id: 1, name: "alpha" },
    { id: 2, name: "beta" }
  ]
};

// compact can be: default, low, med, high, max
dump(data, process.stdout, {
  compact: "default"
});