<?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: Sekhar Babu</title>
    <description>The latest articles on DEV Community by Sekhar Babu (@sekhar_babu_1095c83b17413).</description>
    <link>https://dev.to/sekhar_babu_1095c83b17413</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%2F1285263%2F1623be05-91db-4fb3-b37c-ff3885060399.png</url>
      <title>DEV Community: Sekhar Babu</title>
      <link>https://dev.to/sekhar_babu_1095c83b17413</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sekhar_babu_1095c83b17413"/>
    <language>en</language>
    <item>
      <title>I built a JSON toolkit that never sends your data anywhere</title>
      <dc:creator>Sekhar Babu</dc:creator>
      <pubDate>Sun, 23 Aug 2026 09:21:17 +0000</pubDate>
      <link>https://dev.to/sekhar_babu_1095c83b17413/i-built-a-json-toolkit-that-never-sends-your-data-anywhere-1nlm</link>
      <guid>https://dev.to/sekhar_babu_1095c83b17413/i-built-a-json-toolkit-that-never-sends-your-data-anywhere-1nlm</guid>
      <description>&lt;p&gt;Most "paste your JSON here" tools online send that JSON to a server to&lt;br&gt;
process it. For internal API responses, config files, or anything with&lt;br&gt;
real data in it, that's not something I wanted to do — so I built&lt;br&gt;
&lt;a href="https://jsonlinter.io" rel="noopener noreferrer"&gt;JSONLinter&lt;/a&gt;, a JSON toolkit where literally&lt;br&gt;
everything happens client-side.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;p&gt;It started as a validator/formatter, then grew into 42 tools across six&lt;br&gt;
categories:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Validate &amp;amp; Format&lt;/strong&gt; — validation with precise error locations, pretty
print, minify, JSON repair (fixes trailing commas, single quotes,
unquoted keys, truncated JSON, etc.)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;View &amp;amp; Query&lt;/strong&gt; — tree view, JSONPath queries, structural diff (key
order doesn't matter), full-text search&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Converters&lt;/strong&gt; — CSV, Excel, YAML, XML, SQL, Markdown, both
directions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code Generators&lt;/strong&gt; — infers a type model from a JSON sample and
generates TypeScript, Python, Java, C#, Go, Kotlin, Swift, Rust, or PHP&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Schema Tools&lt;/strong&gt; — JSON Schema validation + generation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Encoding Tools&lt;/strong&gt; — Base64, escape/unescape, JWT decode&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There's also an optional AI assistant on the validator page — it's&lt;br&gt;
bring-your-own-key (OpenAI or Anthropic), and since there's no backend at&lt;br&gt;
all, the key and your JSON go straight from your browser to the provider.&lt;br&gt;
I never see either.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it's built
&lt;/h2&gt;

&lt;p&gt;Stack is React 19 + TypeScript + Vite, Tailwind v4 for styling, CodeMirror&lt;br&gt;
6 for the editor. A few things I had to solve that were more interesting&lt;br&gt;
than expected:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prerendering without SSR.&lt;/strong&gt; I didn't want to take on a Next.js-style&lt;br&gt;
server just to get real HTML for crawlers. Instead, the build runs a&lt;br&gt;
headless Chromium pass (Playwright) over every route after &lt;code&gt;vite build&lt;/code&gt;&lt;br&gt;
and saves the fully-rendered output to &lt;code&gt;dist/&amp;lt;route&amp;gt;/index.html&lt;/code&gt;. Crawlers&lt;br&gt;
get real content and correct per-page meta tags on first paint; once JS&lt;br&gt;
loads, React takes over exactly like a normal SPA. No server, no&lt;br&gt;
hydration mismatches to worry about.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Structural JSON diff.&lt;/strong&gt; A text diff on two JSON documents is mostly&lt;br&gt;
useless because key order doesn't matter semantically. The diff tool&lt;br&gt;
parses both sides and compares the actual structure, so reordering keys&lt;br&gt;
shows as no change, but changing a value does.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Selection highlighting, CodeMirror edge case.&lt;/strong&gt; CodeMirror renders its&lt;br&gt;
selection layer &lt;em&gt;behind&lt;/em&gt; the text layer (z-index -2, deliberately, so&lt;br&gt;
glyph rendering stays crisp), while the active-line highlight paints on&lt;br&gt;
the text layer itself. If the active-line background is opaque, it&lt;br&gt;
completely hides the selection highlight on whatever line your cursor is&lt;br&gt;
on — which is every line right after a double-click. Fix was making the&lt;br&gt;
active-line background translucent instead of a solid fill, so it blends&lt;br&gt;
with the selection color underneath instead of occluding it. Took a while&lt;br&gt;
to track down since "selection isn't visible" and "double-click doesn't&lt;br&gt;
work" looked like different bugs at first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;It's live at &lt;a href="https://jsonlinter.io" rel="noopener noreferrer"&gt;jsonlinter.io&lt;/a&gt; — no signup, no&lt;br&gt;
account, nothing to install. Would genuinely appreciate feedback, especially&lt;br&gt;
on anything that feels missing compared to tools you already reach for.&lt;/p&gt;

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