JSONLens — Free Online JSON Formatter, Validator & Viewer

The all-in-one JSON playground for developers. Format, validate, visualize, and edit JSON online — free, private, no signup.

JSONLens is a fast, privacy-first online JSON formatter, JSON beautifier, JSON validator, and JSON viewer. Paste JSON and instantly pretty print it, check syntax, explore a tree or diagram graph, compare diffs, minify, transform, send API requests, and generate client code — no account, no backend, no tracking.

Live demo: https://shubhransh-gupta.github.io/jsonlens/

Screenshots

Format — JSON formatter, pretty print & tree viewer

Paste JSON on the left, switch between Pretty, Tree, Diagram, Table, and Raw views on the right.

Manipulate — visual editor & format conversion

Edit JSON in a tree, then convert to CSV, TypeScript, Swift, or Kotlin.

Postman — API client built in

Send HTTP requests, import cURL, preview responses, and visualize JSON — with CORS auto-fallback.

Modes

Tab	What it does
Format	Two-pane editor with Pretty, Tree, Diagram, Table, and Raw views
Manipulate	Visual JSON editing — delete, rename, filter, flatten — plus format conversion
Postman	Send HTTP requests from the browser with response inspection
Code Gen	Build an API request and export code (no network calls)
Compare	Side-by-side JSON diff with added/removed/changed highlighting
Transform	Minify, sort keys, flatten/unflatten, remove nulls, escape/unescape
Validate	Real-time JSON validation with optional JSON Schema support

Features

Format workspace

• Pretty Print — Beautifully formatted JSON with syntax highlighting
• Tree View — Interactive expandable tree with copy path/value/JSON actions
• Diagram View — JSON Crack–style interactive ER graph with pan, zoom, and live editing
• Table View — Auto-convert arrays to sortable, searchable tables with CSV export
• Raw View — See your input exactly as pasted
• Search — Find keys and values across the tree
• Statistics — Keys, arrays, depth, size, and type counts
• Depth Map — Visual nesting representation
• URL Import — Fetch JSON from APIs (CORS permitting)
• Large JSON — Virtualized rendering for big payloads

Diagram (interactive graph)

Inspired by JSON Crack — visualize nested JSON as connected node graphs:

• ER-style layout — Objects and arrays rendered as linked nodes with labeled edges
• Live sync — Edit the graph and the JSON editor updates instantly (and vice versa)
• Click to edit — Select a node to edit values, add properties, add array items, or delete keys
• Color previews — Hex color values show inline swatches
• Canvas controls — Pan, zoom, minimap, and fit-to-view
• Demo sample — Load Fruits (Diagram Demo) from the examples dropdown to try it

Manipulate

• Visual editing — Delete nodes, rename keys, and filter arrays in the tree
• Convert — Export JSON to CSV, TypeScript interfaces, Swift structs, or Kotlin data classes

Postman (API client)

• Send requests — GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS with custom headers and body
• CORS modes — Auto (direct first, then CORS proxy fallback), Direct, or Proxy
• cURL import/export — Paste a cURL command or copy the current request as cURL
• Response inspection — Status, timing, size, headers, and formatted body
• HTML preview — When an API returns HTML, view a rendered preview or raw source
• JSON / XML / text — Auto-detects content type and formats accordingly
• Visualize in JSONLens — Send a JSON response straight into the Format workspace
• Request history — Re-run recent requests from the history tab

Code Gen

• Multi-language export — cURL, JavaScript fetch, Python requests, Go, Kotlin, Dart, Swift (URLSession & async/await)
• Client-side only — Generates code without making network requests
• cURL import — Start from an existing cURL command

General

• Command Palette — ⌘K / Ctrl+K for quick actions (including Open Diagram View)
• Themes — Light (default), dark, and system
• 100% Client-Side — Your data never leaves your browser

Quick Start

git clone https://github.com/shubhransh-gupta/jsonlens.git
cd jsonlens
npm install
npm run dev

Open http://localhost:5173/jsonlens/

Build

npm run build
npm run preview

Deploy to GitHub Pages

The repo includes a GitHub Actions workflow (.github/workflows/deploy.yml) that automatically builds and deploys on push to main.

1. Fork or clone this repo
2. Enable GitHub Pages: Settings → Pages → Source: GitHub Actions
3. Push to main

Keyboard Shortcuts

Shortcut	Action
⌘/Ctrl + K	Command palette
⌘/Ctrl + Enter	Format JSON
⌘/Ctrl + Shift + F	Minify JSON
⌘/Ctrl + Shift + C	Copy formatted JSON
⌘/Ctrl + B	Switch to tree view
Esc	Close panel

Tech Stack

• React 19 + TypeScript
• Vite
• Tailwind CSS 4
• CodeMirror 6
• TanStack Virtual
• React Flow + dagre (diagram layout)

Privacy

🔒 Your data stays in your browser.

No accounts. No uploads. No tracking. API requests from the Postman tab are sent from your browser. CORS: Auto mode may route blocked requests through a third-party CORS proxy so you can read responses — use Direct mode if you prefer no proxy.

Contributing

See CONTRIBUTING.md.

License

MIT — see LICENSE.

Built with ❤️ by Shubhransh Gupta as open source.