JSON Beautifier Guide 2026: Format and Pretty Print JSON

name: Format JSON

on: [pull_request]

jobs:

format:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

- name: Install jq

run: sudo apt-get install -y jq

- name: Check JSON formatting

run: |

files=$(find . -name '.json' -not -path './node_modules/')

for file in $files; do

jq '.' "$file" > /tmp/formatted.json

if ! diff -q "$file" /tmp/formatted.json; then

echo "❌ $file is not formatted"

exit 1

fi

done

echo "✅ All JSON files are formatted"

<h3 id="pre-commit-hook" class="text-xl font-semibold mt-8 mb-4 text-foreground">Pre-commit Hook</h3>

Automate formatting before git commits:

#!/bin/sh

# .git/hooks/pre-commit

for file in $(git diff --cached --name-only --diff-filter=ACM | grep '.json$'); do

echo "Formatting $file"

jq '.' "$file" > /tmp/formatted.json

mv /tmp/formatted.json "$file"

git add "$file"

done

Or use pre-commit framework:

# .pre-commit-config.yaml

repos:

- repo: https://github.com/python-jsonschema/check-jsonschema

rev: 0.27.0

hooks:

- id: pretty-format-json

args: ['--autofix', '--indent=2']

<h2 id="advanced-jq-techniques" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Advanced jq Techniques</h2>

<h3 id="filter-while-formatting" class="text-xl font-semibold mt-8 mb-4 text-foreground">Filter While Formatting</h3>

# Remove null values

jq 'walk(if type == "object" then with_entries(select(.value != null)) else . end)' input.json

# Sort by specific field

jq 'sort_by(.timestamp)' events.json

# Select specific fields

jq '[.[] | {id, name, email}]' users.json

<h3 id="bulk-format-directory" class="text-xl font-semibold mt-8 mb-4 text-foreground">Bulk Format Directory</h3>

# Format all JSON files in directory

find . -name '.json' -exec sh -c 'jq "." "$1" > /tmp/out && mv /tmp/out "$1"' _ {} ;

find . -name '.json' | parallel 'jq "." {} > /tmp/{/} && mv /tmp/{/} {}'

<h2 id="diff-friendly-formatting" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Diff-Friendly Formatting</h2>

<h3 id="canonical-json" class="text-xl font-semibold mt-8 mb-4 text-foreground">Canonical JSON</h3>

Consistent key ordering for better git diffs:

# Sort keys recursively

jq --sort-keys '.' input.json > output.json

<h3 id="example-git-diff" class="text-xl font-semibold mt-8 mb-4 text-foreground">Example Git Diff</h3>

Before sorting (hard to review):

-{"z":1,"a":2}

+{"z":1,"a":2,"m":3}

After sorting (clear what changed):

{"a":2,

+ "m":3,

"z":1}

<h2 id="performance-benchmarks" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Performance Benchmarks</h2>

<h3 id="large-file-formatting-100mb-1m-records" class="text-xl font-semibold mt-8 mb-4 text-foreground">Large File Formatting (100MB, 1M records)</h3>

| Tool | Time | Memory | Notes |
|------|------|--------|-------|
| jq | 3.2s | 450MB | Fastest |
| Python | 8.7s | 850MB | High memory |
| Node.js | 5.1s | 620MB | Balanced |
| Big JSON Viewer | 2.8s | 320MB | Best for browser |

<h3 id="streaming-for-huge-files" class="text-xl font-semibold mt-8 mb-4 text-foreground">Streaming for Huge Files</h3>

For files over 1GB, use streaming:

# JSONLines (one JSON object per line)

jq -c '.' huge.json | jq '.'

# Or use streaming parser

cat huge.json | jq --stream 'fromstream(1|truncate_stream([[0]]))'

<h2 id="team-workflow-best-practices" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Team Workflow Best Practices</h2>

<h3 id="editorconfig" class="text-xl font-semibold mt-8 mb-4 text-foreground">EditorConfig</h3>

Ensure consistent formatting across team:

# .editorconfig

[*.json]

indent_style = space

indent_size = 2

charset = utf-8

trim_trailing_whitespace = true

insert_final_newline = true

<h3 id="vs-code-workspace-settings" class="text-xl font-semibold mt-8 mb-4 text-foreground">VS Code Workspace Settings</h3>

// .vscode/settings.json

{

"editor.formatOnSave": true,

"json.format.enable": true,

"[json]": {

"editor.defaultFormatter": "vscode.json-language-features",

"editor.tabSize": 2

}

}

<h3 id="prettier-configuration" class="text-xl font-semibold mt-8 mb-4 text-foreground">Prettier Configuration</h3>

// .prettierrc

{

"tabWidth": 2,

"useTabs": false,

"semi": true,

"singleQuote": false,

"trailingComma": "none",

"printWidth": 80

}

<h2 id="formatting-options-explained" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Formatting Options Explained</h2>

<h3 id="indentation-styles" class="text-xl font-semibold mt-8 mb-4 text-foreground">Indentation Styles</h3>

2 spaces: Standard for web development (React, Angular, Vue)
4 spaces: Common in Python projects and enterprise Java
Tabs: Less common, can cause alignment issues with mixed editors

<h3 id="compact-arrays" class="text-xl font-semibold mt-8 mb-4 text-foreground">Compact Arrays</h3>

Some formatters support compact array formatting:

{

"numbers": [1, 2, 3, 4, 5],

"flags": [true, false, true]

}

Vs. expanded:

{

"numbers": [

1,

2,

3,

4,

5

]

}

Use compact for primitive arrays under 5 elements.

<h3 id="key-sorting-benefits" class="text-xl font-semibold mt-8 mb-4 text-foreground">Key Sorting Benefits</h3>

Alphabetically sorted keys:

Better diffs - Changes are sequential
Easier to find keys in large objects
Merge conflict reduction - Predictable ordering
Consistent hashing - Same content = same hash

# Sort keys

jq -S '.' input.json

<h2 id="production-use-cases" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Production Use Cases</h2>

<h3 id="api-response-logging" class="text-xl font-semibold mt-8 mb-4 text-foreground">API Response Logging</h3>

// Express.js middleware

app.use((req, res, next) => {

const oldSend = res.send;

res.send = function(data) {

if (res.getHeader('Content-Type')?.includes('json')) {

console.log('Response:', JSON.stringify(JSON.parse(data), null, 2));

}

oldSend.apply(res, arguments);

};

next();

});

<h3 id="config-file-generation" class="text-xl font-semibold mt-8 mb-4 text-foreground">Config File Generation</h3>

import json

config = {

"database": {"host": "localhost", "port": 5432},

"cache": {"ttl": 3600}

}

# Write formatted config

with open('config.json', 'w') as f:

json.dump(config, f, indent=2, sort_keys=True)

<h3 id="documentation-examples" class="text-xl font-semibold mt-8 mb-4 text-foreground">Documentation Examples</h3>

Format JSON for documentation:

# Create readable example

echo '{"user":{"id":123,"name":"Alice"}}' | jq '.' > docs/example.json

<h2 id="best-practices" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Best Practices</h2>

Format before committing to version control
Use consistent indentation (2 or 4 spaces team-wide)
Configure editor to format on save
Minify for production to save bandwidth (40-60% smaller)
Sort keys for better diffs and merge conflict resolution
Use pre-commit hooks to enforce formatting automatically
Stream large files instead of loading entirely into memory
Document team conventions in .editorconfig or README
Validate after formatting to ensure no corruption
Use canonical formatting for configuration files

<h2 id="minification-for-production" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Minification for Production</h2>

Remove whitespace to reduce file size:

// JavaScript

const minified = JSON.stringify(obj); // No spaces

# jq compact output

jq -c '.' input.json > output.min.json

# File size comparison

# formatted.json: 4,567 bytes

# minified.json: 1,843 bytes (60% reduction)