I built a free multi-tab JSON editor — here's what I learned

#webdev #javascript #react #opensource

I've been working with JSON a lot — debugging API responses, comparing

payloads, fixing malformed data. Every time I reached for an online JSON

tool, something was missing. So I built my own.

JSON Wallet is a free, browser-only JSON editor at jsonwallet.com.

## What it does

Multi-tab editing — work with multiple JSON files at once, tabs persist in localStorage across sessions
Tree, Table & Text modes — powered by vanilla-jsoneditor
Live validation — instant ✓ Valid / ✗ Invalid badge as you type
Compare — side-by-side diff between two JSONs
Repair — automatically fixes broken/malformed JSON
Stringify / Unstringify — parse stringified JSON back to readable format
Escape / Unescape — add or strip slashes in JSON strings
Drag & drop — drag a .json file directly onto the editor
Load from URL — paste an API endpoint, load the response instantly
Dark / Light theme
PWA — installable from Chrome

## Tech stack

React 18 + TypeScript + Vite
vanilla-jsoneditor for the core editor
Ant Design for UI components
Deployed on a custom domain (Hostinger)

## What I learned

1. vanilla-jsoneditor is powerful but opinionated

It ships with its own menu bar and mode switcher. Customising it means

using onRenderMenu to inject your own buttons — not obvious from the docs.

2. Bundle size matters

The initial bundle was 1.5MB in a single chunk. After lazy loading the

editor component and splitting antd/vanilla-jsoneditor into separate chunks,

the initial JS dropped to ~10KB. PageSpeed went from 70 → 81.

3. Replacing native browser dialogs

vanilla-jsoneditor calls window.alert() on JSON errors. Intercepting it

via the onError callback and replacing with Ant Design notifications

made the UX much cleaner.

## Try it

👉 jsonwallet.com — free, no signup, no data

sent to any server.

Would love feedback on what features are missing!