How to edit JSON online
jsonsql.dev is a free JSON editor that formats, validates, and visualizes JSON entirely in your browser. No data is sent to any server — your JSON stays on your machine.
Paste your JSON — copy JSON from your API response, log file, or code and paste it into the input editor on the left. You can also drag and drop a .json file.
Switch modes — use the Format, Tree View, or Validate tabs to change the output. Format beautifies or minifies JSON. Tree View renders a collapsible tree. Validate checks syntax and reports errors.
Copy the result — click Copy to copy the formatted JSON to your clipboard, or click any value in the tree to copy its JSONPath expression.
Format, view, and validate in one tool
Most JSON tools do one thing. jsonsql.dev combines three essential JSON operations into a single page with a shared input — paste once, switch tabs to get different views.
Format tab
Beautify JSON with 2-space, 4-space, or tab indentation. Minify to remove all whitespace. Syntax highlighting color-codes keys (red), strings (green), numbers (orange), booleans (blue), and null (grey). Line numbers on both panels for easy reference.
Tree View tab
Renders JSON as an interactive, collapsible tree. Objects show key count, arrays show item count. Click any value to copy its JSONPath expression (e.g., $.address.city). Search for keys or values with auto-expand to matches. Use Expand All / Collapse All to navigate large documents.
Validate tab
Real-time validation as you type (300ms debounce). Valid JSON shows a green banner with stats (key count, nesting depth, size in bytes). Invalid JSON shows the exact error with line and column numbers. Auto-fix corrects trailing commas, single quotes, and unquoted keys automatically.
Common JSON errors and how to fix them
When working with JSON, you will encounter cryptic error messages. Here are the most common ones and how to resolve them.
Unexpected token < in JSON at position 0
This error almost always means you received an HTML response instead of JSON — for example, an API returned an error page or a 404 HTML document.
Broken input:
<!DOCTYPE html><html><body>Not Found</body></html>Why it fails: JSON.parse() expects the first character to be {, [, ", a digit, or a literal like true/false/null. The < character is not valid JSON.
Fix: Check your API endpoint URL. Make sure the server is returning Content-Type: application/json and not an HTML error page. Verify the URL is correct and the server is running.
Unexpected end of JSON input
This means the JSON string is incomplete — usually a missing closing bracket, brace, or quote.
Broken input:
{"name": "Alice", "skills": ["JavaScript", "Python"Why it fails: The array [ and the object { are never closed. JSON requires every opening bracket/brace to have a matching closing one.
Fix: Add the missing closing characters:
{"name": "Alice", "skills": ["JavaScript", "Python"]}Expected property name or '}'
This typically means there is a trailing comma after the last property in an object or the last element in an array. The JSON specification (RFC 8259) does not allow trailing commas.
Broken input:
{
"name": "Alice",
"age": 30,
}Why it fails: The comma after 30 tells the parser to expect another property, but it finds } instead.
Fix: Remove the trailing comma, or use the Auto-fix button on this page:
{
"name": "Alice",
"age": 30
}Unexpected token ' in JSON
The JSON specification (RFC 8259) requires double quotes for strings and property names. Single quotes are not valid JSON.
Broken input:
{'name': 'Alice', 'age': 30}Fix: Replace all single quotes with double quotes, or click Auto-fix:
{"name": "Alice", "age": 30}JSON formatting best practices
2-space vs 4-space vs tabs
- 2-space indentation — the most common choice for JSON. Used by npm (package.json), Google style guides, and most JavaScript projects. Keeps deeply nested structures compact.
- 4-space indentation — preferred in Python ecosystems and some enterprise Java projects. Easier to read for people less familiar with nested structures, but uses more horizontal space.
- Tab indentation — lets each developer configure their own visual width. Recommended by some accessibility guidelines because tab width is user-configurable.
When to minify
Minified JSON can be up to 30-50% smaller than formatted JSON, reducing API payload size significantly. Use minified JSON for API responses in production, storing JSON in databases or caches, configuration files embedded in scripts, and logging.
Understanding JSON structure
A JSON document is a tree structure where each node is either a primitive value, an object (unordered collection of key-value pairs), or an array (ordered list of values). Understanding this hierarchy is essential for working with APIs, configuration files, and data interchange.
Objects use curly braces { } and contain named key-value pairs. Arrays use square brackets [ ] and contain ordered, indexed values. In the tree view, objects display their key count (e.g., "4 keys") and arrays display their item count (e.g., "3 items"), making it easy to understand the shape of your data at a glance.
JSON supports six data types, each color-coded in the tree view for instant recognition:
- String (green) — text wrapped in double quotes:
"hello" - Number (orange) — integers or decimals:
42,3.14 - Boolean (blue) — logical values:
trueorfalse - Null (grey) — explicit absence of a value:
null - Object — unordered collection of key-value pairs:
{ } - Array — ordered list of values:
[ ]
JSON syntax rules (RFC 8259)
JSON is stricter than JavaScript object literal syntax: property names must be double-quoted, trailing commas are forbidden, and comments are not supported.
- Strings must use double quotes —
"hello"is valid,'hello'is not - Property names must be double-quoted —
"name": "value", notname: "value" - No trailing commas —
{"a": 1, "b": 2}is valid,{"a": 1, "b": 2,}is not - No comments — neither
//nor/* */are allowed in JSON - No leading zeros on numbers —
0.5is valid,05is not - Valid values only — string, number, object, array,
true,false,null(noundefined, no functions, no dates) - Unicode escapes — special characters must be escaped:
\",\\,\/,\b,\f,\n,\r,\t, or\uXXXX
JSON Editor vs other tools
| Feature | jsonsql.dev | jsonlint.com | VS Code | jq (CLI) |
|---|---|---|---|---|
| Browser-based | Yes | Yes | No (desktop app) | No (CLI) |
| Client-side only | Yes | No (server) | Yes (local) | Yes (local) |
| Format / beautify | Yes (2sp, 4sp, tab) | Yes | Yes | Yes |
| Minify | Yes | No | No | Yes (-c flag) |
| Tree view | Yes (collapsible) | No | Yes (outline) | No |
| Validate with errors | Yes (line/column) | Yes | Yes | Partial |
| Auto-fix common issues | Yes | No | No | No |
| Copy JSONPath on click | Yes | No | Extension needed | No |
| Search in tree | Yes | No | Yes (Ctrl+F) | Yes (queries) |
| Syntax highlighting | Yes | Yes | Yes | With plugins |
| Dark mode | Yes | No | Yes | N/A |
| Drag & drop files | Yes | No | Yes | N/A |
| Works offline | Yes | No | Yes | Yes |
| No install needed | Yes | Yes | No | No |
Related tools
Frequently asked questions
What common JSON errors does Auto-fix correct?
Auto-fix corrects three common issues: trailing commas (removes commas before } or ]), single quotes (converts to double quotes), and unquoted keys (wraps bare keys in double quotes). It cannot fix structural issues like missing brackets.
Does the editor validate JSON automatically?
Yes. Validation runs automatically as you type with a 300ms debounce. The Validate tab shows a green banner for valid JSON or a red banner with the exact error, line, and column number for invalid JSON. An error indicator also appears on the Validate tab button when your JSON is invalid.
What is the tree view for?
The Tree View tab renders your JSON as an interactive, collapsible tree. Objects show key counts, arrays show item counts. You can click any value to copy its JSONPath expression (e.g., $.address.city), search for keys or values, and use Expand All / Collapse All to navigate large documents.
How is this different from a JSON viewer?
This JSON Editor combines formatting, tree viewing, and validation in one page with shared input. Instead of switching between separate tools, you paste JSON once and switch tabs. The Tree View tab provides the same collapsible tree, JSONPath copying, and search functionality as a standalone JSON viewer.
What does "Unexpected token < in JSON at position 0" mean?
This error means you are trying to parse HTML instead of JSON. It usually happens when an API returns an error page (404, 500, or a login redirect) instead of a JSON response. Check the endpoint URL and verify the server is running.
How do I fix JSON that has syntax errors?
Switch to the Validate tab to see the exact error with line and column numbers. For common issues (trailing commas, single quotes, unquoted keys), click Auto-fix. For structural errors like missing brackets, use the error location to find and fix the issue manually.