JSON Viewer & Formatter

Free online JSON viewer, formatter, and validator. Fast, private, and simple.

Live Demo: https://json-viewer.autocompany.workers.dev

Features

• JSON Formatter - Beautify JSON with customizable indentation (2 spaces, 4 spaces, or tabs)
• JSON Minifier - Compress JSON by removing unnecessary whitespace
• JSON Validator - Validate JSON syntax with detailed error messages
• Tree View - Interactive collapsible tree visualization for exploring complex JSON structures
• 100% Private - All processing happens client-side. No data is sent to any server.
• Zero Dependencies - Pure HTML, CSS, and JavaScript. No frameworks needed.
• Fast - Edge-deployed on Cloudflare Workers for global low-latency access.

Usage

Web Interface

1. Visit json-viewer.autocompany.workers.dev
2. Paste your JSON into the input field
3. Click "Format" to beautify, "Minify" to compress, or "Validate" to check syntax
4. Use the tree view to explore nested structures
5. Copy the result with one click

Keyboard Shortcuts

• Ctrl/Cmd + Enter - Format JSON

API Endpoints

Format JSON

curl -X POST https://json-viewer.autocompany.workers.dev/api/format \
  -H "Content-Type: application/json" \
  -d '{"json": "{\"name\":\"John\",\"age\":30}", "indent": 2}'

Response:

{
  "formatted": "{\n  \"name\": \"John\",\n  \"age\": 30\n}",
  "size": 32,
  "originalSize": 25
}

Minify JSON

curl -X POST https://json-viewer.autocompany.workers.dev/api/format \
  -H "Content-Type: application/json" \
  -d '{"json": "{\"name\":\"John\",\"age\":30}", "action": "minify"}'

Response:

{
  "formatted": "{\"name\":\"John\",\"age\":30}",
  "size": 25,
  "originalSize": 25
}

Validate JSON

curl -X POST https://json-viewer.autocompany.workers.dev/api/validate \
  -H "Content-Type: application/json" \
  -d '{"json": "{\"name\":\"John\"}"}'

Valid Response:

{
  "valid": true
}

Invalid Response:

{
  "valid": false,
  "error": "Expected ',' or '}' after property value in JSON at position 15",
  "line": 1,
  "column": 16
}

Technology Stack

• Runtime: Cloudflare Workers (Edge Computing)
• Language: TypeScript
• Frontend: Vanilla HTML/CSS/JavaScript (Zero dependencies)
• Deployment: One-command deployment with Wrangler

Development

Prerequisites

• Node.js 18+
• npm

Setup

# Install dependencies
npm install

# Run development server
npm run dev

# Deploy to production
npm run deploy

Project Structure

json-viewer/
├── src/
│   ├── worker.ts      # Cloudflare Worker entry point
│   ├── api.ts         # API handlers for format/validate
│   └── index.html     # Development HTML template
├── wrangler.toml      # Cloudflare Workers configuration
├── package.json
├── tsconfig.json
└── README.md

Why Another JSON Viewer?

Most online JSON tools are:

• Bloated with ads and trackers
• Slow due to heavy JavaScript frameworks
• Store your data on servers
• Require sign-up or have usage limits

This tool is:

• Ad-free and tracker-free
• Fast - No React, no Vue, just vanilla JS
• Private - All processing in your browser
• Unlimited - No sign-up, no limits
• Edge-deployed - Low latency worldwide via Cloudflare

SEO Keywords

json viewer, json formatter, json validator, json beautifier, json minify, json parser, online json tool, format json online, validate json, json prettifier, json tree view, json explorer, json lint, json checker, free json tool

License

MIT License - Free to use, modify, and distribute.

---

Built by Auto Company