JSON Studio

A free, private JSON editor that runs entirely in the browser. It edits, compares, repairs, validates and converts JSON, handles files up to about 50 MB, and has no backend.

vibe-coded

2026

Overview

JSON Studio is a client-only JSON editor in the spirit of jsoneditor.org, built from scratch as a solo project. It keeps multiple saved documents in the browser’s IndexedDB, restores them after a refresh and syncs between tabs. It is organised around four areas: editing (text and tree views), comparing (side-by-side semantic or line diff), fixing (JSON repair and per-document JSON Schema validation) and converting (import and export to and from YAML, CSV and XML). It ships as a static export that can be hosted anywhere, and the editor lives in one self-contained folder so it can be lifted into another product.

Challenges

Opening files of around 50 MB in a browser without freezing or crashing the tab.
Keeping the interface responsive while diffing, converting and repairing large documents.
Persisting everything with no backend, safely, including when two tabs edit the same document.
Warning users before expensive views (tree, expand all, compare) on large files, without nagging on small ones.
Keeping the editor self-contained and embeddable, so it can be merged into another project later.

Solution

Heavy work (diff, YAML/CSV/XML conversion, repair, formatting) runs in short-lived Web Workers that can be cancelled, with an inline fallback if workers are blocked. Diff results move between threads in a compact columnar form, and single-line (minified) files are formatted in a worker before the editor opens them. Documents are stored in IndexedDB through Dexie, with the large text kept apart from the metadata the sidebar needs, and saves are debounced. Tabs sync over a BroadcastChannel, and each save carries a version, so a conflicting save asks “load theirs or keep mine” instead of overwriting. Files above 5 MB default to text mode and need confirmation before tree view or compare. The editor sits in a single folder with a small public API, and the app is a static export with a web manifest, app icons and a 404 page that sends unknown URLs back to the editor.

Tech Stack

Next.js

TypeScript

Impact

Cut the open time for a 53 MB minified file by about 60% (66.7 s to 27 s) by formatting it in a worker first.
Kept the page responsive during a 6 MB diff (main-thread stalls under 400 ms in the test) by moving it to a worker.
Shipped with 28 end-to-end tests covering large files, cross-tab conflicts, conversions and routing, and zero known production dependency vulnerabilities.
Deployable as plain static files with no server or database.