cd /news/developer-tools/i-built-a-json-toolkit-that-never-se… · home topics developer-tools article
[ARTICLE · art-107663] src=dev.to ↗ pub= topic=developer-tools verified=true sentiment=· neutral

I built a JSON toolkit that never sends your data anywhere

A developer built JSONLinter, a client-side JSON toolkit with 42 tools across six categories, ensuring data never leaves the browser. The project uses React 19, TypeScript, Vite, Tailwind v4, and CodeMirror 6, and includes a prerendering solution using headless Chromium to serve real HTML to crawlers without SSR. An optional AI assistant supports bring-your-own-key for OpenAI or Anthropic, with no backend involved.

read2 min views5 publishedAug 23, 2026

Most "paste your JSON here" tools online send that JSON to a server to

process it. For internal API responses, config files, or anything with

real data in it, that's not something I wanted to do — so I built

JSONLinter, a JSON toolkit where literally everything happens client-side.

It started as a validator/formatter, then grew into 42 tools across six

categories:

There's also an optional AI assistant on the validator page — it's

bring-your-own-key (OpenAI or Anthropic), and since there's no backend at all, the key and your JSON go straight from your browser to the provider.

I never see either.

Stack is React 19 + TypeScript + Vite, Tailwind v4 for styling, CodeMirror

6 for the editor. A few things I had to solve that were more interesting

than expected:

Prerendering without SSR. I didn't want to take on a Next.js-style

server just to get real HTML for crawlers. Instead, the build runs a

headless Chromium pass (Playwright) over every route after vite build

and saves the fully-rendered output to dist/<route>/index.html

. Crawlers

get real content and correct per-page meta tags on first paint; once JS

loads, React takes over exactly like a normal SPA. No server, no

hydration mismatches to worry about.

Structural JSON diff. A text diff on two JSON documents is mostly

useless because key order doesn't matter semantically. The diff tool

parses both sides and compares the actual structure, so reordering keys

shows as no change, but changing a value does.

Selection highlighting, CodeMirror edge case. CodeMirror renders its

selection layer behind the text layer (z-index -2, deliberately, so

glyph rendering stays crisp), while the active-line highlight paints on

the text layer itself. If the active-line background is opaque, it

completely hides the selection highlight on whatever line your cursor is

on — which is every line right after a double-click. Fix was making the

active-line background translucent instead of a solid fill, so it blends

with the selection color underneath instead of occluding it. Took a while

to track down since "selection isn't visible" and "double-click doesn't

work" looked like different bugs at first.

It's live at jsonlinter.io — no signup, no account, nothing to install. Would genuinely appreciate feedback, especially

on anything that feels missing compared to tools you already reach for.

── more in #developer-tools 4 stories · sorted by recency
── more on @jsonlinter 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/i-built-a-json-toolk…] indexed:0 read:2min 2026-08-23 ·