Developer
data tools
done right.

The JSON Formatter lets you beautify, minify, sort and validate any JSON document instantly in your browser.

1. Paste your JSON into the left editor panel, or click Paste to read from your clipboard.
2. Click Format to pretty-print with 2-space indentation, or choose 4-space or tab from the indent dropdown.
3. Use Minify to collapse the JSON to a single line — useful for API payloads or environment variables.
4. Click Sort to sort all object keys alphabetically, making large documents easier to diff manually.
5. If your JSON is broken (trailing commas, single quotes, unquoted keys), click Repair to auto-fix it.
6. Switch to the Tree tab on the right panel to see a collapsible visual tree of your JSON structure.

JSONPath is a query language for JSON, similar to XPath for XML. Use it to extract values, filter arrays, and navigate nested structures.

1. Paste your JSON document into the left panel.
2. Type a JSONPath expression in the path input field. The result updates automatically as you type.
3. Use $ to refer to the root of the document.
4. Use $.user.name to access a nested property.
5. Use $.users[*].email to select a field from every element in an array.
6. Use $.items[?(@.price > 10)] to filter array elements by a condition.
7. Use $.. (recursive descent) to find a key at any depth, e.g. $..id.

JSON Diff compares two JSON documents and shows exactly what changed — added keys, removed keys, and modified values — with full JSON path references.

1. Paste your original JSON into the JSON A panel (left) and the updated JSON into JSON B panel (right).
2. Click Compare. Both documents are formatted and compared automatically.
3. The diff results appear at the bottom. Green rows are additions, red rows are removals, amber rows are changes.
4. Each result shows the full JSON path (e.g. $.user.address.city) so you can locate any change instantly.
5. Click any result row to scroll the diff view to that line and highlight it.
6. Use Edit to return to the editors and adjust your JSON without losing your input.
7. Click Copy Report to export a plain-text summary of all differences.

The SQL Formatter cleans up messy SQL queries with proper indentation, keyword casing, and syntax highlighting.

1. Paste your SQL query into the editor, or type directly.
2. Click Format to break the query onto multiple lines with keyword alignment.
3. Use Upper or Lower to normalise keyword casing (e.g. SELECT vs select).
4. Click Minify to collapse the query back to a single line.
5. Enable Auto to format automatically as you type.

Base64 is an encoding scheme that converts binary or text data to a safe ASCII string. It is commonly used in authentication headers, data URIs, and email attachments.

1. Paste your text into the input panel.
2. Click Encode to convert it to Base64, or Decode to reverse a Base64 string back to text.
3. Use URL-Safe mode to replace + with - and / with _ — required for use in URLs and JWT tokens.
4. Click Swap to instantly move the output back to the input for chaining operations.
5. Full Unicode support: emoji and non-Latin scripts encode correctly.

This tool handles JSON string escaping — useful when embedding JSON inside another JSON string, or when preparing text for inclusion in code.

1. Escape adds JSON escape sequences: quotes become \", newlines become \n, tabs become \t.
2. Unescape removes those escape sequences and restores the original text.
3. Stringify double-encodes a JSON value as a quoted string literal, ready to embed inside another JSON document.
4. Unstringify parses a double-encoded JSON string back to formatted JSON.

TOON (Token-Optimised Object Notation) compresses JSON into a compact format that uses far fewer tokens when sent to LLMs like GPT or Claude, saving cost.

1. Paste your JSON into the left panel.
2. The TOON output appears automatically on the right — null becomes ~, true becomes T, false becomes F.
3. Object braces { } are removed; structure is inferred from indentation.
4. Arrays use a * prefix per item instead of [ ] brackets.
5. Check the cost table below the output to see estimated token and cost savings per model.
6. Click Copy TOON to copy the compact output for use in your LLM prompt.

The HTML Preview tool renders your HTML live in a sandboxed iframe so you can see exactly how it looks across desktop, tablet, and mobile viewports.

1. Paste or type your HTML into the editor panel.
2. The preview updates automatically as you type.
3. Use the Desktop button for full-width rendering.
4. Click Tablet (768px) to preview at a tablet breakpoint.
5. Click Mobile (375px) to preview at iPhone-sized width.
6. Click ↗ New Tab to open the current HTML in a real browser tab, or ↓ Download to save it as an .html file.

URL encoding converts special characters into %XX percent-encoded sequences safe for use in URLs, query strings, and API requests.

1. Paste your text or URL into the input panel on the left.
2. Click Encode to convert special characters — spaces become %20, & becomes %26, etc.
3. Click Decode to reverse a percent-encoded string back to readable text.
4. Use ⇄ Swap to move the output back to the input for chaining — e.g. decode then re-encode.
5. Full Unicode support: emoji and non-Latin scripts are correctly encoded.