-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjson-formatter.html
More file actions
1198 lines (1075 loc) · 61.5 KB
/
Copy pathjson-formatter.html
File metadata and controls
1198 lines (1075 loc) · 61.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Formatter & Validator — Pretty Print | FreeDevTool</title>
<meta name="description" content="Free JSON formatter, validator and beautifier. Pretty-print nested JSON, fix syntax errors, minify, view stats. RFC 8259 compliant. Runs in browser.">
<meta name="robots" content="index, follow">
<meta name="author" content="Anees Ur Rehman">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","datePublished":"2026-05-02","dateModified":"2026-05-19","inLanguage":"en-US","isPartOf":{"@type":"WebSite","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Anees Ur Rehman","url":"https://freedevtool.org/about","jobTitle":"Full-stack developer","worksFor":{"@type":"Organization","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<link rel="canonical" href="https://freedevtool.org/json-formatter">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap">
<link rel="preload" href="style.css?v=20260502-cards" as="style">
<link rel="stylesheet" href="style.css?v=20260502-cards">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon.svg">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="FreeDevTool — 50+ free, fast, privacy-first developer tools">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<meta name="twitter:title" content="JSON Formatter, Validator & Beautifier — Free | FreeDevTool">
<meta name="twitter:description" content="Pretty print, validate & minify JSON online. RFC 8259 compliant, fixes syntax errors, runs in browser, no signup.">
<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3L0CMH3X36"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3L0CMH3X36');
</script>
<meta property="og:title" content="JSON Formatter & Validator — FreeDevTool">
<meta property="og:description" content="Free online JSON formatter and validator. Instant, no sign-up.">
<meta property="og:url" content="https://freedevtool.org/json-formatter">
<meta property="og:type" content="website">
<meta property="og:site_name" content="FreeDevTool">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "JSON Formatter",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Web Browser",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"description": "Free online JSON formatter, validator and beautifier"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is JSON?",
"acceptedAnswer": { "@type": "Answer", "text": "JSON (JavaScript Object Notation) is a lightweight, human-readable data interchange format. It is based on JavaScript object syntax but is language-independent and supported by virtually every programming language. JSON uses key-value pairs, arrays, strings, numbers, booleans, and null values." }
},
{
"@type": "Question",
"name": "What is the difference between JSON formatting and minifying?",
"acceptedAnswer": { "@type": "Answer", "text": "Formatting (beautifying) adds indentation and line breaks to make JSON human-readable. Minifying removes all whitespace and newlines to reduce file size for transmission or storage. Both produce valid JSON — only the presentation differs." }
},
{
"@type": "Question",
"name": "What is valid JSON?",
"acceptedAnswer": { "@type": "Answer", "text": "Valid JSON must have keys quoted in double quotes (not single quotes), no trailing commas after the last element, no comments (// or /* */), and correct nesting of objects and arrays. Common mistakes include using single quotes, trailing commas, and unquoted keys." }
},
{
"@type": "Question",
"name": "What is the difference between JSON and JavaScript objects?",
"acceptedAnswer": { "@type": "Answer", "text": "JavaScript objects allow unquoted keys, single quotes, functions, undefined, and trailing commas. JSON requires double-quoted keys, only supports strings, numbers, booleans, null, objects, and arrays — no functions, no undefined, and no comments." }
},
{
"@type": "Question",
"name": "How do I fix a JSON parse error?",
"acceptedAnswer": { "@type": "Answer", "text": "Common fixes: 1) Replace single quotes with double quotes around keys and string values. 2) Remove trailing commas after the last item in an object or array. 3) Remove comments (JSON does not support // or /* */). 4) Make sure all strings are closed with matching quotes. 5) Check for missing commas between key-value pairs." }
},{"@type":"Question","name":"Does JSON allow comments?","acceptedAnswer":{"@type":"Answer","text":"No. RFC 8259 strictly forbids comments. JavaScript inline comments are not valid JSON and will cause parsers to throw. If you need comments, use JSONC (JSON with Comments — used by VS Code) or JSON5. Strip comments before strict JSON.parse()."}},{"@type":"Question","name":"Can JSON have trailing commas?","acceptedAnswer":{"@type":"Answer","text":"No. RFC 8259 forbids trailing commas after the last element of an array or object. JavaScript object literals allow them, which is the most common JSON syntax error developers introduce. Use a formatter to catch and remove them, or use JSON5 if you need trailing comma support."}},{"@type":"Question","name":"What is RFC 8259?","acceptedAnswer":{"@type":"Answer","text":"RFC 8259 (December 2017) is the current IETF standard for JSON. It obsoleted RFC 7159 and RFC 4627. The standard defines syntax, UTF-8 encoding, and what makes JSON valid. It explicitly notes that JSON is a subset of JavaScript object literal syntax."}}
]
}
</script>
<style>
.editor-pane {
position: relative;
}
.editor-pane textarea {
min-height: 220px;
resize: vertical;
line-height: 1.6;
}
.line-count {
font-family: var(--mono); font-size: 11px;
color: var(--text3); text-align: right; margin-top: 4px;
}
.output-pane {
position: relative;
}
.output-pane .output-block {
min-height: 220px;
max-height: 400px;
overflow: auto;
line-height: 1.7;
}
/* Syntax highlighting */
.json-key { color: #7ec8e3; }
.json-str { color: #98d48f; }
.json-num { color: #f9c97c; }
.json-bool { color: #c792ea; }
.json-null { color: #ff8b8b; }
.json-punct { color: var(--text2); }
.stats-row {
display: flex; gap: 16px; flex-wrap: wrap;
margin-top: 10px;
}
.stat-pill {
font-family: var(--mono); font-size: 11px;
color: var(--text3); background: var(--bg4);
padding: 3px 10px; border-radius: 20px;
}
.stat-pill strong { color: var(--accent); }
.indent-row {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
}
.indent-row label { margin: 0; font-size: 12px; }
.error-marker {
background: rgba(255,90,90,.08);
border-left: 3px solid var(--red);
padding: 12px 14px;
border-radius: 0 var(--radius) var(--radius) 0;
font-family: var(--mono); font-size: 12.5px;
color: var(--red);
margin-top: 10px;
}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://freedevtool.org/"
},
{
"@type": "ListItem",
"position": 2,
"name": "All Tools",
"item": "https://freedevtool.org/all-tools"
},
{
"@type": "ListItem",
"position": 3,
"name": "JSON Formatter & Validator",
"item": "https://freedevtool.org/json-formatter"
}
]
}
</script>
<script src="/ga4-events.js" defer></script>
</head>
<body>
<nav>
<a class="nav-logo" href="/" aria-label="FreeDevTool home"><svg class="logo-mark" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" fill="none"><rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" opacity=".12"/><path d="M9.5 8.5L6 12l3.5 3.5M14.5 8.5L18 12l-3.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>FreeDevTool</a>
<div class="nav-links">
<div class="nav-dropdown" id="tools-dropdown">
<a href="all-tools" onclick="event.preventDefault();this.parentElement.classList.toggle('open')" aria-haspopup="true">Tools <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></a>
<div class="nav-dropdown-menu">
<a href="encoding-tools">
<div class="dd-icon">b64</div>
<div class="dd-info"><div class="dd-name">Encoding & Conversion</div><div class="dd-count">11 tools · Base64, YAML, px→rem</div></div>
</a>
<a href="generation-tools">
<div class="dd-icon">{ }</div>
<div class="dd-info"><div class="dd-name">Generation & Formatting</div><div class="dd-count">16 tools · JSON, SQL, gradients</div></div>
</a>
<a href="security-tools">
<div class="dd-icon">#</div>
<div class="dd-info"><div class="dd-name">Security & Hashing</div><div class="dd-count">3 tools · JWT, MD5, SHA</div></div>
</a>
<a href="text-tools">
<div class="dd-icon">.*</div>
<div class="dd-info"><div class="dd-name">Code & Text Tools</div><div class="dd-count">9 tools · Regex, diff, tokens</div></div>
</a>
<a href="devops-tools">
<div class="dd-icon">JS</div>
<div class="dd-info"><div class="dd-name">Optimization & DevOps</div><div class="dd-count">7 tools · Minifiers, cURL, git</div></div>
</a>
<a href="network-tools">
<div class="dd-icon">IP</div>
<div class="dd-info"><div class="dd-name">Network & Time</div><div class="dd-count">4 tools · IP, DNS, timestamps</div></div>
</a>
<a href="seo-tools">
<div class="dd-icon">SEO</div>
<div class="dd-info"><div class="dd-name">SEO & Meta Tools</div><div class="dd-count">3 tools · OG, meta, slug</div></div>
</a>
<div class="nav-dropdown-divider"></div>
<a class="dd-all" href="all-tools">
<div class="dd-icon">All</div>
<div class="dd-info"><div class="dd-name">Browse all 50 tools</div><div class="dd-count">Searchable catalog & categories</div></div>
</a>
</div>
</div>
<a href="/guides">Guides</a>
<a href="about">About</a>
<a href="privacy">Privacy</a>
</div>
</nav>
<div id="copy-toast">Copied!</div>
<div class="wrapper">
<a class="tool-back" href="/" aria-label="Back to home">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
Back
</a>
<div class="tool-header">
<div class="tool-badge">Formatter</div>
<h1>JSON Formatter, Validator & Beautifier Online</h1>
<p class="tool-description">
Paste any JSON to instantly pretty print, minify, or validate it with this free online JSON formatter and validator. Syntax errors are caught and shown with exact line and column numbers per <a href="https://datatracker.ietf.org/doc/html/rfc8259" rel="noopener" style="color:var(--accent)">RFC 8259</a>. Customizable indentation (2 spaces, 4 spaces, or tabs), alphabetical key sorting, syntax highlighting, and live stats — size, key count, array count, nesting depth. Everything runs in your browser; no data is uploaded. Works offline, no signup, no ads.
</p>
<div class="last-updated">Last updated: May 2026 · Written by <a href="/about">Anees Ur Rehman</a>, full-stack developer</div>
</div>
<div class="tool-card">
<div class="tool-card-header">
<div class="dot dot-red"></div>
<div class="dot dot-yellow"></div>
<div class="dot dot-green"></div>
<span class="tool-card-title">json-formatter.tool</span>
</div>
<div class="tool-body">
<!-- Options row -->
<div class="indent-row" style="margin-bottom:16px">
<div>
<label>Indent</label>
<select id="indent-select" onchange="processInput()">
<option value="2">2 spaces</option>
<option value="4">4 spaces</option>
<option value="tab">Tab</option>
</select>
</div>
<label style="display:flex; align-items:center; gap:6px; font-size:13px; text-transform:none; letter-spacing:normal; cursor:pointer; margin-top:18px">
<input type="checkbox" id="sort-keys" onchange="processInput()"> Sort keys A–Z
</label>
</div>
<!-- Input -->
<div class="editor-pane">
<label>JSON Input</label>
<textarea id="json-input" placeholder='Paste JSON here... e.g. {"name":"John","age":30}' oninput="processInput()" spellcheck="false"></textarea>
<div class="line-count" id="input-count">0 characters</div>
</div>
<!-- Action buttons -->
<div class="btn-row" style="margin: 14px 0">
<button class="btn btn-primary" onclick="doFormat()">Pretty Print</button>
<button class="btn btn-secondary" onclick="doMinify()">Minify</button>
<button class="btn btn-ghost" onclick="doValidateOnly()">Validate only</button>
<button class="btn btn-ghost" onclick="clearAll()">Clear</button>
<button class="btn btn-ghost" onclick="loadSample()">Load sample</button>
</div>
<!-- Status -->
<div id="json-status"></div>
<div id="json-error"></div>
<!-- Output -->
<div class="output-pane" style="margin-top:16px">
<div class="output-label">
<label style="margin:0">Output</label>
<button class="btn btn-ghost" onclick="copyOutput()">Copy</button>
</div>
<div class="output-block" id="json-output" style="color:var(--text2); font-style:italic">
Output will appear here...
</div>
</div>
<!-- Stats -->
<div class="stats-row" id="json-stats" style="display:none">
<span class="stat-pill">Size: <strong id="stat-size">—</strong></span>
<span class="stat-pill">Keys: <strong id="stat-keys">—</strong></span>
<span class="stat-pill">Arrays: <strong id="stat-arrays">—</strong></span>
<span class="stat-pill">Depth: <strong id="stat-depth">—</strong></span>
</div>
</div>
</div>
<!-- =============================================================
LONG-FORM ARTICLE — comprehensive guide for E-E-A-T + ranking.
============================================================= -->
<article>
<p class="aeo-lead" style="font-size:16px;line-height:1.7;color:var(--text);max-width:760px;margin:24px auto 18px;padding:0 4px">
<strong>JSON (JavaScript Object Notation, RFC 8259)</strong> is a lightweight text format for structured data using key-value pairs, arrays, and primitive types. Valid JSON requires double quotes around keys and strings, allows no comments, and accepts no trailing commas. This <strong>free JSON formatter and validator</strong> pretty-prints with configurable indentation, minifies for transmission, sorts keys alphabetically, and identifies the exact location of syntax errors — all RFC 8259 compliant, all entirely client-side.
</p>
<section id="examples" style="max-width:760px;margin:24px auto 32px">
<h2 style="font-size:18px;margin-bottom:14px">Examples</h2>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Common invalid JSON — trailing comma</strong>
<code style="display:block;font-family:var(--mono);font-size:13px;line-height:1.6">{<br> "name": "Alice",<br> "age": 30, ← invalid trailing comma<br>}</code>
<p style="margin:6px 0 0;font-size:13px">JavaScript accepts trailing commas; strict JSON does not. Use JSONC or JSON5 if you need them.</p>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Formatted vs minified</strong>
<code style="display:block;font-family:var(--mono);font-size:13px;line-height:1.6">Formatted: pretty, 2-space indent, readable<br>Minified: {"a":1,"b":2,"c":3} — no whitespace</code>
<p style="margin:6px 0 0;font-size:13px">Minify before sending over the wire; format before reading in code review.</p>
</div>
<div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px">
<strong style="display:block;color:var(--accent);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px">Sorted keys for diff-friendly output</strong>
<p style="margin:0;font-size:14px;line-height:1.6">Alphabetically sorting keys before saving JSON to git makes diffs readable. This formatter sorts keys consistently across nested objects.</p>
</div>
</section>
<aside class="founder-note" style="max-width:760px;margin:24px auto 32px;padding:20px 24px;background:rgba(0,208,132,0.05);border-left:3px solid var(--accent);border-radius:6px;font-size:14px;line-height:1.7;color:var(--text2)">
<div style="font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-weight:600">💡 Why I built this</div>
<p style="margin:0 0 12px">I built this after JSONFormatter.org showed me 7 ads while formatting 200 lines of JSON from a customer support ticket. The payload had email addresses, account IDs, and an OAuth refresh token. Even if JSONFormatter.org's privacy policy says they don't store it, the moment my data rendered there, JavaScript from 14 third-party ad domains had access to the same DOM. This formatter is static HTML — there is no backend to send anything to. Network tab in DevTools confirms zero requests fire when you format. The site is fully inspectable.</p>
<p style="margin:0;font-size:13px;color:var(--text3)">— <a href="/about" style="color:var(--accent);text-decoration:none">Anees Ur Rehman</a>, full-stack developer</p>
</aside>
<section class="article-section">
<h2>What is JSON?</h2>
<p><strong>JSON</strong> (JavaScript Object Notation) is a lightweight, text-based data interchange format codified in <a href="https://datatracker.ietf.org/doc/html/rfc8259" rel="noopener">RFC 8259</a> and the <a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-404/" rel="noopener">ECMA-404</a> standard. It was extracted from JavaScript object literal syntax in the early 2000s by Douglas Crockford, then adopted by every modern programming language as the default format for APIs, configuration files, and data storage. Today it is the dominant data format on the public internet — REST APIs, GraphQL responses, NoSQL databases, infrastructure-as-code, package manifests (<code>package.json</code>, <code>composer.json</code>), and structured logging all use JSON.</p>
<p>JSON's strength is its simplicity. There are exactly six data types — <strong>string</strong>, <strong>number</strong>, <strong>boolean</strong>, <strong>null</strong>, <strong>object</strong>, and <strong>array</strong> — and a tiny grammar that can be parsed by every language without external libraries. Unlike XML, there are no schemas to negotiate, no namespaces, no element-vs-attribute confusion. Unlike CSV, JSON handles nested data and mixed types natively. Unlike YAML, JSON has no indentation rules and no ambiguity around <code>NO</code>, <code>YES</code>, or numbers with leading zeros.</p>
<p>The trade-off is verbosity (lots of quotes and braces) and strictness (any deviation from the spec is a parse error). That strictness is exactly why a JSON formatter and validator is one of the most-used tools in a developer's daily workflow — when an API call breaks, the first question is always: <em>is the JSON even valid?</em></p>
</section>
<section class="article-section">
<h2>Valid JSON syntax — the rules nobody remembers</h2>
<p>RFC 8259 defines a deceptively simple grammar. The rules that catch developers off-guard:</p>
<table class="ref-table">
<thead>
<tr><th>Rule</th><th>Allowed</th><th>Not allowed</th></tr>
</thead>
<tbody>
<tr>
<td>Quotes around strings & keys</td>
<td><code>"key"</code> (double quotes only)</td>
<td><code>'key'</code>, <code>key</code> (single quotes or unquoted)</td>
</tr>
<tr>
<td>Trailing commas</td>
<td><code>{"a":1,"b":2}</code></td>
<td><code>{"a":1,"b":2,}</code> (trailing comma)</td>
</tr>
<tr>
<td>Comments</td>
<td>None — JSON has no comments</td>
<td><code>// comment</code> or <code>/* comment */</code></td>
</tr>
<tr>
<td>Number formats</td>
<td><code>0</code>, <code>1.5</code>, <code>-3.14</code>, <code>1e10</code>, <code>0.5e-2</code></td>
<td><code>01</code> (leading zero), <code>.5</code> (leading dot), <code>1.</code> (trailing dot), <code>NaN</code>, <code>Infinity</code>, <code>+5</code> (leading plus)</td>
</tr>
<tr>
<td>Strings</td>
<td>UTF-8 in double quotes; <code>\"</code>, <code>\\</code>, <code>\/</code>, <code>\b</code>, <code>\f</code>, <code>\n</code>, <code>\r</code>, <code>\t</code>, <code>\uXXXX</code></td>
<td>Unescaped control characters; raw newlines inside strings; single backslashes</td>
</tr>
<tr>
<td>Object keys</td>
<td>Any string, must be quoted, must be unique within an object</td>
<td>Numeric keys (must be quoted), duplicate keys (technically allowed but parser-dependent)</td>
</tr>
<tr>
<td>Top-level value</td>
<td>Object <code>{}</code>, array <code>[]</code>, string, number, boolean, or null</td>
<td>Empty input, multiple top-level values</td>
</tr>
<tr>
<td>Whitespace</td>
<td>Spaces, tabs, line breaks (anywhere except inside strings)</td>
<td>BOM at start of document (some parsers strict)</td>
</tr>
</tbody>
</table>
<h3>Common syntax errors and how to fix them</h3>
<table class="ref-table">
<thead>
<tr><th>Error</th><th>Cause</th><th>Fix</th></tr>
</thead>
<tbody>
<tr>
<td><code>SyntaxError: Unexpected token } in JSON at position 12</code></td>
<td>Trailing comma before <code>}</code> or <code>]</code></td>
<td>Remove the comma. JSON forbids trailing commas, even though JavaScript allows them.</td>
</tr>
<tr>
<td><code>Unexpected token ' in JSON</code></td>
<td>Single quotes around keys or string values</td>
<td>Replace all <code>'</code> with <code>"</code>. JSON requires double quotes.</td>
</tr>
<tr>
<td><code>Unexpected end of JSON input</code></td>
<td>Truncated response, missing closing <code>}</code> or <code>]</code></td>
<td>Verify the full payload arrived; count brackets. Check Content-Length header for partial reads.</td>
</tr>
<tr>
<td><code>Unexpected token / in JSON</code></td>
<td>Comments (<code>//</code> or <code>/*</code>) inside JSON</td>
<td>Remove comments. If you need them, use JSON5 or JSONC and document the dependency.</td>
</tr>
<tr>
<td><code>Bad escaped character</code></td>
<td>Unescaped backslash, e.g. Windows path <code>"C:\path"</code></td>
<td>Double-escape: <code>"C:\\path"</code>. JSON treats <code>\</code> as an escape character.</td>
</tr>
<tr>
<td><code>Number after decimal expected</code></td>
<td>Trailing dot like <code>"value": 1.</code></td>
<td>Remove the trailing dot or add a digit: <code>1.0</code>.</td>
</tr>
</tbody>
</table>
</section>
<section class="article-section">
<h2>JSON vs JSON5 vs JSONC vs YAML — when to pick what</h2>
<p>"Strict JSON" is great for machines but painful for humans. Several variants relax the rules in trade-off ways. Use this matrix to decide:</p>
<table class="ref-table">
<thead>
<tr><th>Format</th><th>Comments</th><th>Trailing commas</th><th>Unquoted keys</th><th>Single quotes</th><th>Best for</th></tr>
</thead>
<tbody>
<tr>
<td><strong>JSON</strong> (RFC 8259)</td>
<td><span class="no">No</span></td>
<td><span class="no">No</span></td>
<td><span class="no">No</span></td>
<td><span class="no">No</span></td>
<td>API payloads, data interchange. Maximum compatibility.</td>
</tr>
<tr>
<td><strong>JSON5</strong></td>
<td><span class="yes">Yes</span></td>
<td><span class="yes">Yes</span></td>
<td><span class="yes">Yes (ES5 identifiers)</span></td>
<td><span class="yes">Yes</span></td>
<td>Human-edited config files. Used by Apple's <code>plist</code> alt and some CLI tools.</td>
</tr>
<tr>
<td><strong>JSONC</strong> (JSON with Comments)</td>
<td><span class="yes">Yes</span></td>
<td><span class="yes">Yes</span></td>
<td><span class="no">No</span></td>
<td><span class="no">No</span></td>
<td>VS Code config (<code>tsconfig.json</code>, <code>settings.json</code>). Comments are the killer feature.</td>
</tr>
<tr>
<td><strong>YAML</strong></td>
<td><span class="yes">Yes</span></td>
<td>N/A (no commas needed)</td>
<td><span class="yes">Yes</span></td>
<td><span class="yes">Yes</span></td>
<td>Long config files (Kubernetes, GitHub Actions, Docker Compose). Indentation-sensitive.</td>
</tr>
</tbody>
</table>
<p>This formatter accepts strict JSON (RFC 8259). For JSON5 or JSONC, strip the comments and trailing commas first, then format. For YAML, use our <a href="yaml-to-json">YAML to JSON converter</a> to switch formats.</p>
</section>
<section class="article-section">
<h2>Working with JSON in 8 programming languages</h2>
<p>Every modern language ships with a built-in JSON parser. Here are the canonical idioms — paste these into your project as a starting point.</p>
<h3>JavaScript / TypeScript</h3>
<div class="lang-block">
<div class="lang-block-header">javascript</div>
<pre><code>// Parse string → object
const data = JSON.parse('{"name":"Anees","age":30}');
// Stringify object → string (indent 2 spaces)
const json = JSON.stringify(data, null, 2);
// Stringify with custom replacer (drop sensitive fields)
const safe = JSON.stringify(data, (key, val) =>
key === 'password' ? undefined : val
);
// Parse safely with try/catch
try { JSON.parse(input); } catch (e) { /* malformed */ }
</code></pre>
</div>
<h3>Python</h3>
<div class="lang-block">
<div class="lang-block-header">python</div>
<pre><code>import json
# String → dict
data = json.loads('{"name":"Anees","age":30}')
# Dict → string (indent=2 for pretty print)
text = json.dumps(data, indent=2, ensure_ascii=False, sort_keys=True)
# File-based
with open('data.json') as f: data = json.load(f)
with open('out.json', 'w') as f: json.dump(data, f, indent=2)
</code></pre>
</div>
<h3>PHP</h3>
<div class="lang-block">
<div class="lang-block-header">php</div>
<pre><code>// String → assoc array (true = associative; false = stdClass)
$data = json_decode('{"name":"Anees","age":30}', true);
// Array → string (JSON_PRETTY_PRINT for indent)
$json = json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
// Check for parse errors
if (json_last_error() !== JSON_ERROR_NONE) {
echo json_last_error_msg();
}
</code></pre>
</div>
<h3>Java (Jackson)</h3>
<div class="lang-block">
<div class="lang-block-header">java</div>
<pre><code>import com.fasterxml.jackson.databind.ObjectMapper;
ObjectMapper mapper = new ObjectMapper();
// String → POJO
User u = mapper.readValue(jsonString, User.class);
// POJO → pretty-printed string
String json = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(u);
// Generic parsing without a class
JsonNode root = mapper.readTree(jsonString);
String name = root.get("name").asText();
</code></pre>
</div>
<h3>Go</h3>
<div class="lang-block">
<div class="lang-block-header">go</div>
<pre><code>import "encoding/json"
type User struct {
Name string `json:"name"`
Age int `json:"age"`
}
// Bytes → struct
var u User
json.Unmarshal([]byte(`{"name":"Anees","age":30}`), &u)
// Struct → indented bytes
out, _ := json.MarshalIndent(u, "", " ")
</code></pre>
</div>
<h3>Rust (serde_json)</h3>
<div class="lang-block">
<div class="lang-block-header">rust</div>
<pre><code>use serde::{Deserialize, Serialize};
#[derive(Serialize, Deserialize)]
struct User { name: String, age: u32 }
let u: User = serde_json::from_str(r#"{"name":"Anees","age":30}"#)?;
let pretty = serde_json::to_string_pretty(&u)?;
</code></pre>
</div>
<h3>Ruby</h3>
<div class="lang-block">
<div class="lang-block-header">ruby</div>
<pre><code>require 'json'
# String → hash
data = JSON.parse('{"name":"Anees","age":30}')
# Hash → pretty-printed string
text = JSON.pretty_generate(data)
# Strict: raise on duplicate keys
JSON.parse(input, allow_duplicate_keys: false)
</code></pre>
</div>
<h3>Bash (jq)</h3>
<div class="lang-block">
<div class="lang-block-header">bash</div>
<pre><code># Pretty print
cat data.json | jq
# Minify
cat data.json | jq -c
# Extract a field
curl -s api.example.com | jq -r '.users[0].name'
# Validate (exit code 0 = valid, non-zero = invalid)
jq empty data.json
</code></pre>
</div>
<p>If your toolchain isn't here, the principle is the same: parse to a native object/dictionary, manipulate it, serialize back. Avoid hand-crafting JSON with string concatenation — that's how you get unescaped quotes and security bugs.</p>
</section>
<section class="article-section">
<h2>Pretty print, minify, and key sorting — when to use each</h2>
<h3>Pretty printing (formatting)</h3>
<p>Adds whitespace, line breaks, and indentation so humans can read the structure. Use during development, debugging, code review, log inspection, and when storing JSON in version control (diff readability). Default indent: 2 spaces in JS/Python ecosystems, 4 spaces in some style guides. Tabs work but vary across editors.</p>
<h3>Minification</h3>
<p>Strips all unnecessary whitespace — output is one long line. Use for HTTP responses (gzip already handles whitespace, but minified JSON is smaller before compression too), embedded JSON in HTML attributes, JWTs, cache values, and anywhere bandwidth or storage matters. Typical size reduction: 20–40% before gzip.</p>
<h3>Alphabetical key sorting</h3>
<p>Reorders object keys lexically. Use when you need <strong>deterministic output</strong> — content-addressable storage (hash the JSON), config diffs (so reordered keys don't show as changes), and HTTP signature schemes (e.g. Stripe webhooks, AWS SigV4) that require canonical JSON. <strong>Don't</strong> sort if your downstream consumer cares about key order (e.g. some legacy XML-to-JSON systems).</p>
<div class="article-aside">
<strong>JSON spec note:</strong> RFC 8259 says object key order is <em>not significant</em> — parsers may return keys in any order. In practice, most modern parsers (V8, CPython 3.7+, Go) preserve insertion order. Don't depend on order across languages or runtimes.
</div>
</section>
<section class="article-section">
<h2>Performance — handling large JSON responsibly</h2>
<p>JSON parsing is O(n) in payload size, but the constant factor is real. A 100MB JSON file can take 5+ seconds to parse and consume 5–10× its size in memory due to object overhead. Strategies for big payloads:</p>
<ul>
<li><strong>Stream-parse instead of <code>JSON.parse</code></strong>. Libraries: <code>stream-json</code> (Node), <code>ijson</code> (Python), <code>jackson-core</code> Streaming API (Java), <code>encoding/json</code> Decoder (Go). They emit events for each token, never building the full object tree in memory.</li>
<li><strong>Use NDJSON / JSON Lines</strong> for log-like data — one JSON object per line. Parse line by line, process incrementally. Used by Elasticsearch, Splunk, and most log shippers.</li>
<li><strong>Switch to a binary format</strong> when JSON's overhead becomes the bottleneck. CBOR, MessagePack, or Protocol Buffers can be 30–70% smaller and 2–5× faster to parse, with the trade-off of losing human-readability.</li>
<li><strong>Use <code>JSON.parse</code> with a <code>reviver</code></strong> in JavaScript to filter/transform values during parse rather than after. Saves a full second pass over deeply-nested data.</li>
<li><strong>Avoid JSON for binary data</strong>. Base64-encoding a 1MB image into JSON makes it 1.33MB. Use multipart uploads or binary-safe formats instead.</li>
</ul>
</section>
<section class="article-section">
<h2>JSON Schema — validating structure beyond syntax</h2>
<p><strong>Valid JSON syntax</strong> ≠ <strong>valid JSON content.</strong> A formatter tells you the brackets balance; a schema tells you the data has the right shape. <a href="https://json-schema.org/" rel="noopener">JSON Schema</a> is the de-facto standard for declaring "this object must have a <code>name</code> string and an <code>age</code> integer 0–150."</p>
<div class="lang-block">
<div class="lang-block-header">json-schema</div>
<pre><code>{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "object",
"required": ["name", "email"],
"properties": {
"name": { "type": "string", "minLength": 1, "maxLength": 100 },
"email": { "type": "string", "format": "email" },
"age": { "type": "integer", "minimum": 0, "maximum": 150 }
},
"additionalProperties": false
}</code></pre>
</div>
<p>Use schema validation at API boundaries: Express middleware (<code>ajv</code>), FastAPI auto-validates Pydantic models, gRPC has Protobuf, OpenAPI 3.x is mostly JSON Schema. The investment pays off when you stop debugging "why did my API receive null?" — your schema rejected the bad payload before your handler ran.</p>
</section>
<section class="article-section">
<h2>JSON prettier, pretty JSON, prettier JSON — what users actually mean</h2>
<p>"JSON prettier", "pretty JSON", "prettier JSON", "json pretty" — Google sees these as a single intent: <em>take this JSON blob, indent it, and make it readable</em>. Some people confuse the noun-form with the JavaScript code formatter <a href="https://prettier.io/" rel="noopener" target="_blank">Prettier</a>; the two are unrelated. The tool above does what most "JSON prettier" searches actually want: paste JSON in, get indented JSON out, with brackets aligned, keys color-coded, and syntax errors highlighted at the offending line. No installation, no Node project, no <code>npx</code> command — open the page and paste.</p>
<h3>Pretty JSON output — 2 spaces, 4 spaces, or tabs?</h3>
<p>RFC 8259 doesn't specify whitespace, so any indentation is "pretty". The de-facto conventions: <strong>2 spaces</strong> in JavaScript and TypeScript codebases (matches Prettier's default), <strong>4 spaces</strong> in Python and Java (matches PEP 8 / Google Java style), <strong>tabs</strong> in older Go and shell-heavy projects. Pick one per repo — toggling between them creates noise in version-control diffs without changing any data. The formatter above defaults to 2 spaces with a toggle for 4 and tabs.</p>
<h3>JSON pretty print in JavaScript, Python, and PHP — one-liners</h3>
<p>Three native one-liners that match the formatter's output:</p>
<ul>
<li><strong>JavaScript:</strong> <code>JSON.stringify(obj, null, 2)</code> — the third argument is the indent count.</li>
<li><strong>Python:</strong> <code>json.dumps(obj, indent=2)</code> — same idea, different argument name.</li>
<li><strong>PHP:</strong> <code>json_encode($arr, JSON_PRETTY_PRINT)</code> — flag-based, fixed at 4 spaces.</li>
</ul>
<p>For larger automation — pretty-printing 1000+ files in CI, sorting keys, removing trailing commas — pair this tool's output with <code>jq '.'</code> at the CLI, or process the output through the <a href="/json-to-csv">JSON to CSV converter</a> if you need tabular data instead.</p>
<h3>Free JSON formatter without ads — what to look for</h3>
<p>Most "free formatter" search results route through ad-heavy pages that load 10+ third-party scripts before they format your JSON. Some POST your input to a backend for "validation" — meaning your JSON (which often contains tokens, IDs, internal field names) sits in their server logs forever. The formatter above is fully client-side: open DevTools → Network, paste JSON, click format — zero requests fire. It works offline. View source any time and search for <code>JSON.parse</code> to confirm the parser is the browser's native one, not a remote API.</p>
<h2>JSON formatter and SEO best practices</h2>
<ul>
<li><strong>Use JSON-LD for structured data.</strong> Google's preferred format for rich-result eligibility (FAQPage, Product, Article, BreadcrumbList). Embed inside <code><script type="application/ld+json"></code>. Use our <a href="meta-tag-generator">meta tag generator</a> to scaffold the markup.</li>
<li><strong>Keep your <code>application/json</code> Content-Type header correct.</strong> Browsers and crawlers behave differently with <code>text/plain</code> or missing types — Cloudflare and many CDNs apply caching/compression rules based on it.</li>
<li><strong>Don't index API responses.</strong> Add <code>X-Robots-Tag: noindex</code> to <code>/api/*</code> endpoints — JSON in search results looks broken and dilutes your domain's quality score.</li>
<li><strong>Use UTF-8 with <code>ensure_ascii=false</code></strong> in Python (or equivalent) for international content. Reduces payload size and avoids escape-encoding artifacts in your indexed snippets.</li>
</ul>
</section>
</article>
<!-- How to use + mistakes -->
<section class="use-cases">
<h2>How to use the JSON formatter</h2>
<p>Whether you're debugging a malformed API response or reviewing a config file, the workflow is the same: paste, format, fix any errors flagged, and copy. The formatter never sends data to a server, so even production payloads with sensitive customer info can be pasted safely.</p>
<ul class="use-case-list">
<li><strong>1. Paste your JSON</strong> in the input area. It can be minified, escaped, or already-pretty — the formatter accepts all three.</li>
<li><strong>2. Click "Format" (or it auto-formats on paste).</strong> Output is indented 2 spaces by default; switch to 4 spaces or tabs if your team's style guide differs.</li>
<li><strong>3. Read the error pointer if validation fails.</strong> The line and column of the first parse error appear above the output, with a syntax-highlighted excerpt.</li>
<li><strong>4. Use "Minify"</strong> when you need the opposite — strip whitespace before embedding JSON in a URL, header, or string literal.</li>
<li><strong>5. Copy the output</strong> with one click. The formatter preserves Unicode escapes (<code>\uXXXX</code>) and number precision exactly as input.</li>
</ul>
<h3>Common JSON mistakes to avoid</h3>
<ul class="mistakes-list">
<li><strong>Trailing commas.</strong> JSON forbids them — <code>{"a": 1,}</code> is invalid. JS5 and YAML allow them, which trips people up. Strip before saving.</li>
<li><strong>Single quotes around keys or strings.</strong> JSON requires double quotes. <code>{'key': 'value'}</code> is JS object literal syntax, not JSON.</li>
<li><strong>Unquoted keys.</strong> <code>{key: 1}</code> works in JS but breaks every JSON parser. Always quote keys: <code>{"key": 1}</code>.</li>
<li><strong>Comments inside JSON.</strong> Standard JSON has no <code>// comments</code> or <code>/* */</code>. If you need them, switch to JSON5 or JSONC and document the dependency.</li>
<li><strong>Numbers larger than <code>Number.MAX_SAFE_INTEGER</code>.</strong> JS loses precision past 2<sup>53</sup>. Server IDs and Discord snowflakes need to be quoted as strings to survive the round-trip.</li>
<li><strong>Mixing UTF-8 and escaped Unicode.</strong> <code>"é"</code> and <code>"\u00e9"</code> are equivalent but produce different bytes. Pick one consistently for diff-friendly storage.</li>
</ul>
</section>
<!-- FAQ -->
<section class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-item open">
<div class="faq-q" onclick="toggleFaq(this)">
What is JSON?
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<div class="faq-a">
JSON (JavaScript Object Notation) is a lightweight, human-readable text format for storing and transmitting data. It consists of key-value pairs in objects <code>{"key": "value"}</code> and ordered arrays <code>[1, 2, 3]</code>. JSON supports six data types: string, number, boolean, null, object, and array. It's the dominant data format for REST APIs, configuration files, and database storage.
</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
What are the most common JSON errors?
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<div class="faq-a">
The top JSON errors are: <br>
1. <strong>Single quotes</strong> — JSON requires double quotes around keys and strings. <code>'name'</code> → <code>"name"</code><br>
2. <strong>Trailing commas</strong> — <code>{"a": 1,}</code> is invalid. Remove the comma after the last item.<br>
3. <strong>Unquoted keys</strong> — <code>{name: "John"}</code> is JavaScript, not JSON. Keys must be quoted.<br>
4. <strong>Comments</strong> — JSON does not support <code>//</code> or <code>/* */</code>.<br>
5. <strong>Undefined/NaN/Infinity</strong> — these JavaScript values are not valid JSON.
</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
What is the difference between JSON pretty print and minify?
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<div class="faq-a">
<strong>Pretty print</strong> adds indentation and line breaks, making JSON readable for humans. Use it for debugging, config files, and documentation. <strong>Minify</strong> removes all whitespace and newlines, reducing file size for network transmission. Minified JSON can be 20–30% smaller. Both produce equivalent data — only formatting differs.
</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Does JSON support comments?
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<div class="faq-a">
No. Standard JSON (RFC 8259) does not support comments. This is intentional — JSON was designed as a data format, not a configuration format. If you need comments in config files, consider JSONC (JSON with Comments, used by VS Code), YAML, or TOML instead.
</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
How do I parse JSON in JavaScript, Python, and Go?
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<div class="faq-a">
<strong>JavaScript:</strong> <code>const obj = JSON.parse(jsonString);</code> — and serialize with <code>JSON.stringify(obj, null, 2)</code><br>
<strong>Python:</strong> <code>import json; obj = json.loads(json_string)</code> — serialize: <code>json.dumps(obj, indent=2)</code><br>
<strong>Go:</strong> <code>import "encoding/json"; json.Unmarshal([]byte(jsonString), &obj)</code><br>
<strong>PHP:</strong> <code>$obj = json_decode($jsonString, true);</code>
</div>
</div>
<div class="faq-item">
<div class="faq-q" onclick="toggleFaq(this)">
Is my JSON data safe to paste here?
<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<div class="faq-a">
Yes. All processing is done entirely in your browser using JavaScript's built-in <code>JSON.parse()</code> and <code>JSON.stringify()</code> APIs. No data is ever sent to a server. The tool works fully offline. We strongly recommend not pasting production secrets or API keys into any online tool — as a general security practice.
</div>
</div>
</section>
<!-- Related Tools -->
<section class="related-section">
<h2>Related Tools</h2>
<div class="related-grid">
<a class="related-card" href="unix-timestamp-converter">
<div class="related-icon">⏱</div>
<div class="related-card-info">
<div class="related-card-name">UNIX Timestamp Converter</div>
<div class="related-card-desc">Epoch time to readable dates</div>
</div>
</a>
<a class="related-card" href="base64-encoder">
<div class="related-icon">b64</div>
<div class="related-card-info">
<div class="related-card-name">Base64 Encoder / Decoder</div>
<div class="related-card-desc">Encode and decode Base64 strings</div>
</div>
</a>
<a class="related-card" href="uuid-generator">
<div class="related-icon">uid</div>
<div class="related-card-info">
<div class="related-card-name">UUID Generator</div>
<div class="related-card-desc">Generate v4 UUIDs in bulk</div>
</div>
</a>
</div>
</section>
<section class="all-tools-section" aria-label="Browse all FreeDevTool developer tools">
<h2>Browse all 50 free developer tools</h2>
<p class="atc-sub">All tools run in your browser, no signup required, nothing sent to a server.</p>
<div class="all-tools-grid">
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">b64</div>
<div class="atc-cat-title"><h3>Encoding & Conversion</h3><span class="atc-cat-count">11 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/base64-encoder">Base64 Encoder / Decoder</a></li>
<li><a href="/base64-image">Image to Base64</a></li>
<li><a href="/byte-converter">Byte Converter (KB / MB / GB)</a></li>
<li><a href="/case-converter">Case Converter</a></li>
<li><a href="/hex-to-rgb">Hex to RGB / HSL</a></li>
<li><a href="/html-entity">HTML Entity Encoder</a></li>
<li><a href="/json-to-csv">JSON to CSV Converter</a></li>
<li><a href="/px-to-rem">PX to REM Converter</a></li>
<li><a href="/string-escape">String Escape / Unescape</a></li>
<li><a href="/url-encoder">URL Encoder / Decoder</a></li>
<li><a href="/yaml-to-json">YAML to JSON Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">{ }</div>
<div class="atc-cat-title"><h3>Formatting & Generators</h3><span class="atc-cat-count">13 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/color-name">Color Name from Hex</a></li>
<li><a href="/color-picker">Color Palette Picker</a></li>
<li><a href="/css-box-shadow">CSS Box Shadow</a></li>
<li><a href="/css-gradient">CSS Gradient Generator</a></li>
<li><a href="/json-formatter">JSON Formatter / Validator</a></li>
<li><a href="/lorem-ipsum">Lorem Ipsum Generator</a></li>
<li><a href="/markdown-preview">Markdown Preview</a></li>
<li><a href="/password-generator">Password Generator</a></li>
<li><a href="/qr-generator">QR Code Generator</a></li>
<li><a href="/sql-formatter">SQL Formatter</a></li>
<li><a href="/uuid-generator">UUID Generator</a></li>
<li><a href="/word-to-markdown">Word to Markdown</a></li>
<li><a href="/xml-formatter">XML Formatter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">JS</div>
<div class="atc-cat-title"><h3>Minifiers & DevOps</h3><span class="atc-cat-count">6 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/chmod-calculator">chmod Calculator</a></li>
<li><a href="/cron-parser">Cron Expression Parser</a></li>
<li><a href="/css-minifier">CSS Minifier</a></li>
<li><a href="/html-minifier">HTML Minifier</a></li>
<li><a href="/js-minifier">JavaScript Minifier</a></li>
<li><a href="/http-status">HTTP Status Codes</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">#</div>
<div class="atc-cat-title"><h3>Security & Hashing</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/hash-generator">Hash Generator (MD5, SHA)</a></li>
<li><a href="/jwt-decoder">JWT Decoder</a></li>
<li><a href="/jwt-generator">JWT Generator</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">.*</div>
<div class="atc-cat-title"><h3>Code & Text</h3><span class="atc-cat-count">8 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/ai-token-counter">AI Token Counter</a></li>
<li><a href="/char-counter">Character & Word Counter</a></li>
<li><a href="/git-cheatsheet">Git Commands Cheatsheet</a></li>
<li><a href="/number-base">Number Base Converter</a></li>
<li><a href="/regex-explainer">Regex Explainer</a></li>
<li><a href="/regex-tester">Regex Tester</a></li>
<li><a href="/text-diff">Text Diff Checker</a></li>
<li><a href="/wcag-contrast">WCAG Contrast Checker</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">IP</div>
<div class="atc-cat-title"><h3>Network & APIs</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/dns-lookup">DNS Lookup</a></li>
<li><a href="/http-request-builder">HTTP Request Builder</a></li>
<li><a href="/ip-lookup">IP Address Lookup</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">⏱</div>
<div class="atc-cat-title"><h3>Time & Dates</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/relative-time">Relative Time Calculator</a></li>
<li><a href="/timestamp-diff">Timestamp Diff</a></li>
<li><a href="/unix-timestamp-converter">Unix Timestamp Converter</a></li>
</ul>
</div>
<div class="atc-cat">
<div class="atc-cat-head">
<div class="atc-cat-icon">SEO</div>
<div class="atc-cat-title"><h3>SEO & Meta</h3><span class="atc-cat-count">3 tools</span></div>
</div>
<ul class="atc-list">
<li><a href="/meta-tag-generator">Meta Tag Generator</a></li>
<li><a href="/og-preview">Open Graph Preview</a></li>
<li><a href="/slug-generator">URL Slug Generator</a></li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<div>© 2026 FreeDevTool — JSON Formatter & Validator</div>
<div class="footer-links">
<a href="/all-tools">All Tools</a>
<a href="/about">About</a>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Use</a>
</div>
</footer>
<script>
let lastParsed = null;
let currentOutput = '';
function getIndent() {
const v = document.getElementById('indent-select').value;
return v === 'tab' ? '\t' : parseInt(v);
}
function processInput() {
const input = document.getElementById('json-input').value;
document.getElementById('input-count').textContent = input.length + ' characters';
if (!input.trim()) {
clearStatus();
return;
}
tryParse(input);
}
function tryParse(input) {
try {
let parsed = JSON.parse(input);
if (document.getElementById('sort-keys').checked) parsed = sortKeys(parsed);
lastParsed = parsed;
showStatus('ok', '✓ Valid JSON');
document.getElementById('json-error').innerHTML = '';