<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Small Tools Notes]]></title><description><![CDATA[Small Tools Notes]]></description><link>https://thomaschantools.hashnode.dev</link><generator>RSS for Node</generator><lastBuildDate>Sat, 07 Nov 2026 11:46:20 GMT</lastBuildDate><atom:link href="https://thomaschantools.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Local-First Doesn't Mean Offline: How I Decide Where to Paste JSON]]></title><description><![CDATA[Every developer has done it: an API returns something strange, you copy the response, open the first "JSON formatter" search result, and paste. It takes…]]></description><link>https://thomaschantools.hashnode.dev/local-first-doesn-t-mean-offline-how-i-decide-where-to-paste-json</link><guid isPermaLink="true">https://thomaschantools.hashnode.dev/local-first-doesn-t-mean-offline-how-i-decide-where-to-paste-json</guid><category><![CDATA[json]]></category><category><![CDATA[webdev]]></category><category><![CDATA[privacy]]></category><dc:creator><![CDATA[Thomas Chan]]></dc:creator><pubDate>Mon, 02 Nov 2026 03:56:43 GMT</pubDate><content:encoded><![CDATA[<p>Every developer has done it: an API returns something strange, you copy the response, open the first "JSON formatter" search result, and paste. It takes three seconds and usually works. It is also, occasionally, the moment a customer's email address, an internal token, or a chunk of production data leaves your machine for a server you know nothing about.</p>
<p>I don't think the answer is "never use web tools". They are genuinely useful. The answer is to know which kind of tool you are using and match it to the data. Here is the mental model I use.</p>
<h2>Three kinds of "online" JSON tool</h2>
<p><strong>1. Server-side tools.</strong> Your text is sent to a backend, processed and sent back. Formatting, conversion and validation may all happen remotely. These can be perfectly fine for public sample data. They are the wrong place for anything sensitive, because you cannot see what is logged or kept.</p>
<p><strong>2. Fully client-side tools.</strong> The page loads once and everything happens in your browser's JavaScript. Your JSON never needs to travel anywhere. These are the safest web option, though you are still trusting the code the page loaded.</p>
<p><strong>3. Local-first tools with optional remote features.</strong> This is the category most modern tools actually fall into. Core work such as parsing, formatting, tree views and conversion runs in the browser, while specific features call an external service. AI-assisted repair, sharing links and cloud sync are typical examples. The term comes from the <a href="https://www.inkandswitch.com/essay/local-first/">Ink &amp; Switch essay on local-first software</a>, which argues that your data should live primarily on your own device, with the network as an enhancement rather than a requirement.</p>
<p>The third category is where people get confused. "Local-first" is not the same as "100% local". If you click the button that sends your broken JSON to an AI model, it leaves the browser. That is usually documented. Whether you read it is another matter.</p>
<h2>How to tell which kind you're using</h2>
<p>You don't have to trust marketing copy. You can check:</p>
<ul>
<li><strong>Open DevTools → Network</strong> and clear it. Paste your JSON and use the feature. If no request carries your payload, the work happened locally. Repeat for each feature you plan to use, not just the first one.</li>
<li><strong>Go offline.</strong> Load the page, disconnect, and try again. Features that still work are local. Features that fail are not.</li>
<li><strong>Read the privacy page for specifics.</strong> Look for named third parties (an AI provider, an analytics service) and for which features use them.</li>
</ul>
<p>This takes about two minutes and answers the question better than any badge on a landing page.</p>
<h2>Matching the tool to the data</h2>
<p>My rough rules:</p>
<table>
<thead>
<tr>
<th>Data</th>
<th>Acceptable tool</th>
</tr>
</thead>
<tbody><tr>
<td>Public sample data, docs examples</td>
<td>Anything</td>
</tr>
<tr>
<td>Internal but non-sensitive (feature flags, test fixtures)</td>
<td>Client-side or local-first, avoiding remote features</td>
</tr>
<tr>
<td>Customer data, tokens, credentials, health or payment info</td>
<td>Local CLI or editor only (<code>jq</code>, <code>python -m json.tool</code>, your IDE)</td>
</tr>
</tbody></table>
<p>For the last row, no web tool is the right answer, however it is built. Your editor and <code>jq</code> are already on your machine and are not going anywhere.</p>
<h2>Redact before you paste</h2>
<p>When I do need a visual tool for real data, for example to see a deeply nested response as a table, I redact first. A small <code>jq</code> filter does it:</p>
<pre><code class="language-sh">jq 'walk(if type == "object" then
  with_entries(if (.key | test("email|token|secret|password"; "i"))
    then .value = "REDACTED" else . end)
else . end)' response.json &gt; safe.json
</code></pre>
<p>It is not perfect. It matches key names, not values. But it removes the obvious hazards and keeps the structure intact, which is usually what you need to debug.</p>
<h2>What I actually use</h2>
<p>For terminal work, <code>jq</code> covers most things. For visual inspection of large payloads I use a browser toolkit at <a href="https://jsonswiss.com/">https://jsonswiss.com/</a>. It describes its core features as running in the browser (tree and table view, formatting, validation, conversions), and it is explicit that AI-assisted repair goes through an AI provider. That is a good example of honest local-first design: the default path is local, and the remote path is opt-in and labelled. I still apply the table above. The data decides, not the tool.</p>
<h2>The short version</h2>
<ul>
<li>"Online tool" covers three very different architectures.</li>
<li>Local-first means <em>local by default</em>, not <em>never remote</em>.</li>
<li>Two minutes in the Network tab tells you more than the marketing does.</li>
<li>Sensitive data stays in local tools, and you redact before visualising.</li>
</ul>
<p>None of this is complicated. It just has to become a habit before the day it matters.</p>
]]></content:encoded></item></channel></rss>