Introduction

If you want JSON to look readable in a TextBox, the essential step is to parse it and then write it back out with indentation. Simply inserting raw minified JSON into a text control works, but it is hard to read and even harder to debug.

The Basic Pattern

Pretty-printing JSON is always a two-step process:

1. parse the JSON into a structured object
2. serialize it again with indentation enabled

That matters because pretty-printing should validate the JSON instead of blindly inserting line breaks into text that might already be malformed.

JavaScript Example

In browser or Node.js code, JSON.stringify is the normal tool.

1const raw = '{"name":"Ada","skills":["math","programming"],"active":true}';
2const formatted = JSON.stringify(JSON.parse(raw), null, 2);
3
4console.log(formatted);

Output:

1{
2  "name": "Ada",
3  "skills": [
4    "math",
5    "programming"
6  ],
7  "active": true
8}

If you are filling a text area in the browser, assign the formatted string directly.

const textBox = document.getElementById("jsonBox");
textBox.value = formatted;

C# Example for Desktop Apps

If the TextBox belongs to a .NET desktop app, use a JSON library to parse and reformat before assigning the text.

With System.Text.Json:

1using System;
2using System.Text.Json;
3
4string raw = "{\"name\":\"Ada\",\"skills\":[\"math\",\"programming\"],\"active\":true}";
5
6using JsonDocument document = JsonDocument.Parse(raw);
7string formatted = JsonSerializer.Serialize(document.RootElement, new JsonSerializerOptions
8{
9    WriteIndented = true
10});
11
12Console.WriteLine(formatted);

Then assign formatted to the text control.

Handle Invalid JSON Explicitly

Pretty-printing should fail cleanly when the input is not valid JSON. Otherwise the UI may show partial or misleading output.

JavaScript example with error handling:

1function beautifyJson(raw) {
2  try {
3    return JSON.stringify(JSON.parse(raw), null, 2);
4  } catch {
5    return "Invalid JSON";
6  }
7}

The same principle applies in C# with try and catch around JsonDocument.Parse.

TextBox Versus Better Display Controls

A plain TextBox is fine when you only need readable text. If users need syntax highlighting, code folding, or copy-friendly formatting for large payloads, a richer control may be better.

Still, for many admin tools and debug panels, a multiline textbox with a monospace font is enough.

Example HTML:

<textarea id="jsonBox" rows="12" cols="60" style="font-family: monospace;"></textarea>

That small styling change makes a big difference when showing structured JSON.

Large Payload Considerations

For very large JSON documents, beautifying everything before display can make the UI sluggish. In those cases, consider:

• truncating or paging the payload
• formatting only when the user requests it
• using a dedicated viewer component

Pretty-printing is helpful, but it still creates a larger string than the compact original.

If the textbox is editable, decide whether the beautified output is just for viewing or whether users will copy it back into another system. That affects whether you preserve exact spacing, line endings, and character escaping from the serializer you choose.

Common Pitfalls

A common mistake is trying to beautify JSON with manual string replacement instead of a real parser. That breaks easily when strings contain braces, commas, or escaped characters.

Another mistake is displaying the result in a control with proportional fonts. JSON becomes much harder to scan when indentation and alignment do not line up visually.

A third issue is swallowing parse errors silently. If the input is invalid JSON, show that clearly instead of displaying a half-processed result.

Summary

• Parse the JSON first, then serialize it again with indentation
• In JavaScript, use JSON.parse plus JSON.stringify(..., null, 2)
• In .NET, use a JSON library and enable indented output
• Handle invalid JSON explicitly instead of trying to format broken input
• A multiline textbox with a monospace font is usually the minimum good display setup