Skip to content

Repository files navigation

JSONit

A fast, private, entirely client-side JSON toolbox. No server — your data never leaves the browser.

Features

  • Parse & validate with exact error position (line/column)
  • Repair on demand — a "Fix Automatically" prompt (never silent) for single quotes, unquoted keys, trailing commas, comments, Python True/None, triple-quoted """values""", wrapping code fences, and truncated documents (powered by jsonrepair); undo with ⌘Z
  • Extract JSON from anything — paste log lines, NDJSON, or mixed prose and it pulls out every embedded JSON object into an array
  • Format / Minify / Sort keys (A→Z, Z→A) / Stringify / Unescape, plus Undo/Redo
  • Explorable tree view — virtualized (handles millions of nodes), right-click to copy/edit/duplicate/delete, inline editing, color swatches for hex/rgb/named colors, Expand/Collapse all; detected timestamps also get Copy as date / Copy as ISO 8601 in the right-click menu
  • Search across keys and values (⌘F) with Safari-style highlight-all and next/previous navigation
  • JSONPath queries ($.team[?(@.active == true)].name) with copy / open-in-editor
  • Transform — pick fields to keep (Structure) or flatten to a values array, then map each item with a JS expression ("user_" + x); fields are listed by their nested path (_source.operatory[].$ref), grouped and indented, so same-named keys in different objects stay distinct
  • Human-readable dates — machine timestamps are detected and annotated inline (tree and table) with a readable date and relative time: Unix epoch (seconds / ms / µs / ns, as numbers or strings), Windows FILETIME, .NET ticks, compact YYYYMMDD[HHMMSS], MongoDB ObjectIds, and ISO 8601. A 1990–2100 sanity window and per-format validation keep ID-like numbers from being misread; a key-name hint (fields like *_at, date, ts, created, birth*) additionally unlocks lower-confidence formats — Excel/OLE serial dates and pre-2001 (9-digit) epoch seconds — without misreading plain IDs elsewhere. Toggle it with the 🕑 clock button in the tree/table toolbars. In Settings, a searchable time-zone picker lets you find a zone by city, country, offset, or abbreviation (e.g. "new york", "india", "+5:30", "EST") with friendly labels — or just pick auto-detected Local; rendering is DST-aware per timestamp (e.g. PST vs PDT) and defaults to UTC
  • Table view — any array of objects (or scalars) as a spreadsheet grid, columns auto-detected as the union of keys. Click a header to sort (ascending → descending → off; timestamp columns sort chronologically), filter rows by content, show/hide columns, and Copy / Download as CSV. Nested object/array cells show a JSON preview and copy their JSON on click; absent fields render as a dim (distinct from ""/null)
  • CSV import — open (or drag-and-drop) a .csv and it becomes a JSON array of objects, with values type-inferred
  • Compare / diff — paste a second document and get a structured added/removed/changed list, each entry showing its path ($.team[0].name) and the before → after value
  • Generate types — infer TypeScript, Go, or Python (dataclass) type definitions from the current document, with optional/nullable fields detected across array items, int-vs-float inference, and syntax-highlighted, copyable output
  • Settings — font size, indentation (spaces/tabs), a custom primary color, and date conversion (on/off + searchable time-zone picker); resizable panes, theme-matched tooltips throughout, and a responsive mobile layout (toolbar buttons collapse to icons)
  • History — documents saved to IndexedDB (last 50), restore with one click; the current buffer is auto-saved and restored on reload so a refresh never loses your work
  • Files — open via picker or drag-and-drop, download the result
  • Installable PWA — install to your desktop/home screen and use it fully offline; updates apply automatically

Performance design

Built to stay responsive on very large (tens-of-MB) documents:

  • The parsed document lives only in the Web Worker. Parsing, repair, search, queries, transforms, and every tree edit run there, and the (potentially huge) parsed object is never cloned across the worker boundary to the main thread.
  • The tree is windowed against the worker. The worker owns the tree's expansion state and builds the flat row list; the main thread pulls a small slice of pre-rendered rows around the viewport (~one screenful plus a buffer) on demand. Expanding, collapsing, revealing a search hit, and re-formatting never rebuild a giant list on the UI thread — and Format preserves your expansion instead of resetting it.
  • Large-file editor mode. Above ~4 MB the editor drops JSON syntax highlighting (CodeMirror's incremental highlighter can't keep multi-million-line documents tokenized, which also makes deep scrolling janky). The editor stays plain but smooth; use the Tree / Query / Transform tabs to work with the data.
  • History bodies live in a separate IndexedDB store, so listing history never loads document contents.

Offline / PWA

JSONit is a Progressive Web App: after the first visit a service worker precaches the app shell, the JSON worker, and assets, so it runs with no network. It's installable to the desktop/home screen and updates itself in the background (via vite-plugin-pwa). The service worker only runs in a production build — verify locally with npm run build && npm run preview.

Development

npm install
npm run dev    # start dev server
npm run build  # production build to dist/

Stack: Vite · React 19 · TypeScript · CodeMirror 6 · jsonrepair · jsonpath-plus · idb · vite-plugin-pwa

Packages

Contributors

Languages