How to Pretty-Print JSON in JavaScript: A Complete Guide

Introduction: Why Does JSON Look Like a Mess, and How to Fix It?

Have you ever opened your browser console, seen a mile-long string with no spaces, and thought, "Where's the error?"? It's a classic scenario. JSON is a universal data interchange language, but in its raw form, it reads about as easily as a microwave manual in Japanese. Especially when there's a lot of data: nested objects, arrays, long strings.

Fortunately, JavaScript has built-in tools that turn this "mess" into neat, structured beauty. The process is called pretty-print JSON. In this article, we'll cover all the methods: from basic JSON.stringify to advanced custom solutions. You'll learn not just to read JSON, but to do it comfortably.

This article is written for pythonlib.ru — an educational resource where we love clear explanations and practical examples. Let's go!

What is Pretty-Print JSON and Why Do You Need It?

Pretty-print (or prettify) is the process of formatting structured data (JSON, XML, YAML) with indentation, line breaks, and alignment. Visually, it looks like nicely formatted code, not a single long string.

Why do you need it?

\n
• Debugging. You can see the object's structure: where the keys are, where nested objects are, where arrays are.
\n
• Reading logs. In browser consoles or server logs, formatted JSON saves your eyes.
\n
• Documentation. JSON examples in documentation are always pretty-printed.
\n
• Learning. Beginners find it easier to understand data structure when it's broken down into levels.
\n

In JavaScript, there are two main ways to get pretty JSON: the built-in JSON.stringify and third-party libraries (e.g., pretty-js). But let's start with the basics.

Method 1: JSON.stringify() with Parameters (Most Popular)

You're probably familiar with the JSON.stringify() method. It converts an object into a JSON string. But it has second and third parameters that work wonders.

Syntax

JSON.stringify(value, replacer, space)

\n
• value — your object or array.
\n
• replacer — a function or array for filtering keys (often null).
\n
• space — the number of spaces for indentation (or a string, e.g., "\\t" for tabs).
\n

Example 1: Basic Pretty-Print with Spaces

const user = {\n  name: "Alexey",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "Moscow",\n    zip: 101000\n  }\n};\n\n// Without formatting — a single line\nconsole.log(JSON.stringify(user));\n// {"name":"Alexey","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"Moscow","zip":101000}}\n\n// With formatting — beautiful!\nconsole.log(JSON.stringify(user, null, 2));\n

Result in the console:

{\n  "name": "Alexey",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "Moscow",\n    "zip": 101000\n  }\n}\n

Notice: 2-space indentation made the structure readable. You can use 4 spaces or tabs ("\\t").

Example 2: Using replacer for Filtering

Sometimes you need to output only part of the data. The second parameter replacer can be an array of keys.

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "Alexey",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

Or a function:

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // exclude