<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Li Yi</title>
    <description>The latest articles on DEV Community by Li Yi (@li_yi_dcec96bf2647dec1b7e).</description>
    <link>https://dev.to/li_yi_dcec96bf2647dec1b7e</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4174928%2F40eeeb0e-a4ba-4e3c-9fe5-aed702539161.png</url>
      <title>DEV Community: Li Yi</title>
      <link>https://dev.to/li_yi_dcec96bf2647dec1b7e</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/li_yi_dcec96bf2647dec1b7e"/>
    <language>en</language>
    <item>
      <title>Format JSON without pasting it into a random website</title>
      <dc:creator>Li Yi</dc:creator>
      <pubDate>Sat, 10 Oct 2026 09:18:56 +0000</pubDate>
      <link>https://dev.to/li_yi_dcec96bf2647dec1b7e/format-json-without-pasting-it-into-a-random-website-27ja</link>
      <guid>https://dev.to/li_yi_dcec96bf2647dec1b7e/format-json-without-pasting-it-into-a-random-website-27ja</guid>
      <description>&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;You hit an API, get a 4,000-character single line back, and need it readable. So you search "online json formatter", paste the response into the first site that loads, and press Format.&lt;/p&gt;

&lt;p&gt;That response probably contains access tokens, customer records, internal hostnames — data you would not email to a stranger. Yet the paste box on a no-name domain has no particular reason to be more trustworthy, and nothing on the page tells you where the bytes went.&lt;/p&gt;

&lt;p&gt;Here are three ways to get formatted JSON without it leaving your machine, plus a two-minute way to check whether any online formatter is telling the truth about it.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The DevTools one-liner (fastest)
&lt;/h2&gt;

&lt;p&gt;Open the console and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;rawString&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;null, 2&lt;/code&gt; is the pretty-print part: second argument is a replacer, third is the indent — &lt;code&gt;2&lt;/code&gt;, &lt;code&gt;4&lt;/code&gt;, or a &lt;code&gt;"\t"&lt;/code&gt; string. If the payload is an array of objects, &lt;code&gt;console.table(JSON.parse(rawString))&lt;/code&gt; is often more readable than the tree.&lt;/p&gt;

&lt;p&gt;Zero installs, zero uploads. The catch is the failure mode: if the input is invalid, &lt;code&gt;JSON.parse&lt;/code&gt; throws and the message is frequently useless — "Unexpected token } in JSON at position 2471". Which line? Which column? You get neither.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Command line
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;jq &lt;span class="nb"&gt;.&lt;/span&gt; &amp;lt; response.json     &lt;span class="c"&gt;# pretty-print&lt;/span&gt;
jq &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="nb"&gt;.&lt;/span&gt; &amp;lt; response.json  &lt;span class="c"&gt;# minify to one line&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;or without jq installed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="s1"&gt;'const fs=require("fs");process.stdout.write(JSON.stringify(JSON.parse(fs.readFileSync(0,"utf8")),null,2))'&lt;/span&gt; &amp;lt; response.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good for files you already have on disk. Awkward for the "select 300 lines from a log, make it readable, move on" case — and &lt;code&gt;jq&lt;/code&gt; is not on a default Windows box.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. A purely client-side web page
&lt;/h2&gt;

&lt;p&gt;This is the gap I eventually filled with &lt;a href="https://tools.mindutil.com/" rel="noopener noreferrer"&gt;ToolStack&lt;/a&gt; — essentially the browser version of &lt;code&gt;jq&lt;/code&gt;, without the trust question. The &lt;a href="https://tools.mindutil.com/en/tools/json-formatter" rel="noopener noreferrer"&gt;JSON formatter page&lt;/a&gt; covers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Format&lt;/strong&gt; with 2 spaces / 4 spaces / tab&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Minify&lt;/strong&gt; to a single line&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Validate&lt;/strong&gt; with an error panel showing &lt;strong&gt;line, column and character offset&lt;/strong&gt;, not just a raw parser message&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Syntax highlighting and line numbers in both input and output&lt;/strong&gt;, so a 3,000-line response is skimmable&lt;/li&gt;
&lt;li&gt;Copy, download as &lt;code&gt;formatted.json&lt;/code&gt;, and &lt;code&gt;Ctrl/Cmd + Enter&lt;/code&gt; to format from the keyboard&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One implementation detail worth knowing, because it is the difference between "useful" and "annoying": V8 does not include a position in every &lt;code&gt;JSON.parse&lt;/code&gt; error class — &lt;code&gt;{"a":}&lt;/code&gt; yields none at all. Recovering it means parsing the text a second time with a tolerant grammar parser (the Lezer JSON parser here) and taking the offset of the first error node. That is what lets the UI point at a line instead of shrugging.&lt;/p&gt;

&lt;p&gt;No request is made either way: the input goes through &lt;code&gt;JSON.parse&lt;/code&gt; inside the page, so there is nothing on the wire to sniff.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to verify any "runs locally" claim yourself
&lt;/h2&gt;

&lt;p&gt;Three checks, about two minutes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;DevTools → Network → filter on fetch/XHR.&lt;/strong&gt; Paste a large blob, hit Format, watch for outgoing requests. Nothing should appear except analytics beacons — and note that telemetry is a separate question from your data being uploaded, so check what those payloads actually contain.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pull the plug.&lt;/strong&gt; With the page loaded, tick "Offline" in the Network panel (or switch off your adapter) and run the tool again. If it still works, the computation is local.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Read the client.&lt;/strong&gt; View source and grep the bundle for &lt;code&gt;fetch(&lt;/code&gt;, &lt;code&gt;XMLHttpRequest&lt;/code&gt;, &lt;code&gt;FormData&lt;/code&gt;, &lt;code&gt;navigator.sendBeacon&lt;/code&gt;. A genuine client-side tool has its whole logic in the browser.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Disclosure for my own page, since the above is how I would audit it: GA4 page-level analytics is on; tool input and output are never captured; there is no account system and nothing is stored server-side.&lt;/p&gt;

&lt;h2&gt;
  
  
  If you want to look around
&lt;/h2&gt;

&lt;p&gt;32 tools in total — JSON, Base64, image compression and format conversion (JPG/PNG/WebP/HEIC), color pickers and converters, unit conversion, calculators, QR codes — in 7 languages, no sign-up.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tools.mindutil.com/" rel="noopener noreferrer"&gt;https://tools.mindutil.com/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>json</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
