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
.jsonfile 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
Would love feedback on what features are missing!