DEV Community

nilutpal
nilutpal

Posted on

I built a browser-only JSON & Markdown workbench so my data never has to leave my laptop

The problem

Every time I needed to format, diff, or validate a gnarly JSON payload — a webhook log, an API response, a config file with a stray trailing comma — I ended up on some random jsonformatter.xyz site, pasting in data I probably shouldn't have pasted anywhere. Some of that data had customer emails in it. Some had auth tokens. I got tired of trusting "we don't store your data" banners on sites clearly funded by ad networks.

So I built JSON OS — a JSON and Markdown workbench that runs 100% in the browser. No upload, no backend call, no account. Open the tab, paste your data, close the tab, it's gone.

What it actually does

It's not just a formatter. It's four synced views over the same document, plus a set of tools I kept wanting and never found bundled together anywhere:

Four views on one doc

  • Text View — CodeMirror 6, syntax highlighting, and an inline "⚡ 1-click repair" banner the moment your JSON breaks
  • Tree View — virtualized so it doesn't choke on huge payloads, expandable/searchable
  • Table View — turns JSON arrays into a sortable spreadsheet grid with CSV export
  • Chart View — bar/line/pie/doughnut SVG charts straight from a JSON array, with SUM/AVG/MIN/MAX built in and SVG export

A repair engine for real-world broken JSON Not just "valid or invalid" — it actually fixes the stuff that shows up in production logs: escaped quotes, smart curly quotes, unquoted keys, Python/JS literals (True, None, undefined), trailing commas, missing colons, even log-line prefixes like 2026-07-22 INFO {"a": 1}.

One-click type generation Paste JSON, get TypeScript interfaces, Zod schemas, Python Pydantic models, Rust Serde structs, Go structs, or Draft-07 JSON Schema. I use this constantly when reverse-engineering an API that has no docs.

PII & secrets anonymizer Detects emails, passwords, API keys, JWTs, credit cards, and IPs, then redacts, masks, or hashes them — genuinely useful before pasting a payload into a bug report or a Slack thread.

An in-browser API sandbox Send GET/POST/PUT/DELETE requests, import a cURL command from DevTools/Postman to auto-fill everything, export your request back as cURL, and pipe the response straight into a new tab for charting or type generation.

Schema validation + Mongo-style querying + diffing Ajv-based JSON Schema validation (Draft-07 and 2020-12) with templates for common shapes, $match-style filtering ($eq, $gt, $in, $regex, $elemMatch, $and/$or), and a side-by-side diff view with configurable ignore rules.

A Markdown studio, because I needed one anyway Live preview, Mermaid diagrams (flowcharts, sequence, Gantt, mindmaps, ER diagrams), KaTeX math, an outline drawer, and a word-count/reading-time footer.

How it's built

For the curious: Svelte 5 (runes) + Vite + TypeScript on the frontend, with all the compute-heavy work — parsing, validating, formatting, repairing, sorting — offloaded to a Web Worker via Comlink so the UI thread never locks up on huge files. Ajv is lazy-loaded inside the worker so it doesn't bloat the main bundle. Persistence is IndexedDB via idb-keyval, debounced so it doesn't thrash on every keystroke. It works fully offline as an installable PWA. Multi-tab document state lives in a per-tab store class, and components read through a proxy bound to the active tab instead of prop-drilling — which turned out to be the only sane way to keep four different views in sync without leaking state between tabs.

Try it

jsonos.online

JSON Schema Validator Online, JSON Editor & Type Generator — Validate, Format, Query, Chart & Redact · JSON OS

Two free, browser-based workbenches in one app. JSON: format, validate, repair, compare, MongoDB-style query. Markdown: live preview with Mermaid diagrams, KaTeX math, syntax-highlighted code and rich embeds. No signup, no uploads.

favicon jsonos.online

If you work with JSON or Markdown regularly, I'd genuinely appreciate you kicking the tires and telling me what's missing. Bug reports and feature requests are welcome, and if you want to see how something is implemented, it's all in the open.

Top comments (0)