Parse. Edit. Convert. Query. Diff. All in one tab.
A full-featured editor and toolkit for structured data formats — JSON, YAML, and XML — that runs entirely in your browser. No installation, no server, no data ever leaving your machine. Open a file, paste text, or fetch from a URL and start working immediately.
Pretty-print, minify, validate against a schema, query with JSONPath or XPath, diff two documents, convert between formats, encode/decode strings, and edit the live tree — all from a single HTML file.
The Swiss Army Knife is a browser-based editor for JSON, YAML, and XML documents. Everything runs locally — no data is sent anywhere. The editor is powered by CodeMirror 5 with syntax highlighting, code folding, bracket matching, and real-time validation. The status bar at the bottom shows the current format, node count, nesting depth, gzipped size estimate, and any parse errors.
.json, .yaml, .yml, or .xml file onto the editor area..json, .yaml, or .xml).Use the JSON / YAML / XML buttons in the toolbar to set the active format. The editor's syntax highlighter and validator switch accordingly. The format can also change automatically when you convert a document.
The toolbar runs across the top of the page. Buttons are grouped by function:
| Button | Action |
|---|---|
| ↩ / ↪ | Undo / Redo (also Ctrl+Z / Ctrl+Y) |
| Pretty | Format and indent the document |
| Minify | Strip all whitespace |
| Clear | Empty the editor |
| 🕑 Recent | Open a recently used document from the history list |
| 📂 Open | Pick a file from disk |
| 🌐 URL | Fetch content from a URL |
| 📋 Copy | Copy editor content to clipboard |
| 💾 Save | Download content as a file |
| 🔄 Convert | Toggle the conversion panel |
| ⚙️ Transform | Toggle the transformation panel |
| 🔍 Query | Toggle the query panel |
| 📋 Schema | Toggle the schema panel |
| ⚡ Diff | Toggle the diff panel |
| 🔐 Encode | Toggle the encoding panel |
| 🌲 Tree | Toggle the interactive tree view |
| ⌨ | Show keyboard shortcuts |
The tab bar below the toolbar lets you work on multiple documents at the same time.
Each tab stores its own content, format, and name independently in localStorage.
The main editing area is a full-featured CodeMirror 5 editor.
The strip at the bottom of the editor shows live information about the current document:
| Field | Meaning |
|---|---|
| Format | JSON / YAML / XML — the active parse format |
| Nodes | Total number of keys and values in the document |
| Depth | Maximum nesting level |
| ~gzip | Estimated gzipped size of the document |
| Error | Parse error message and line number (if any) |
| ⚠ duplicates | Warning if duplicate keys are found in a JSON object |
Click 🌲 Tree to open a collapsible tree panel alongside the editor. The tree reflects the parsed document in real time and supports interactive editing.
Enter to confirm or Escape to cancel.| Menu item | Action |
|---|---|
| Add key | Add a new key-value pair inside an object |
| Add item | Append a new item to an array |
| Rename key | Rename the current key |
| Delete | Remove this node from its parent |
| Copy path | Copy the JSONPath to this node to the clipboard |
| Copy value | Copy the serialized value of this node to the clipboard |
All tree edits are written back to the editor immediately and can be undone with Ctrl+Z.
Drag a tree row to reorder it within its parent. You can reorder items in arrays and keys in objects. Only siblings (nodes with the same parent) can be swapped — you cannot drag a node to a different level.
Click 🔄 Convert to open the conversion panel. The current document is converted on the fly.
| Conversion | Notes |
|---|---|
| JSON → YAML | Replaces the editor content with the YAML equivalent |
| YAML → JSON | Replaces the editor content with the JSON equivalent |
| JSON ↔ XML | Keys starting with @ become XML attributes; #text becomes text content |
| XML → JSON | Parses the XML and produces a JSON representation |
| JSON → CSV | Works on a top-level array of objects; columns are derived from the first row's keys |
| CSV → JSON | Supports comma, semicolon, and tab delimiters; first row is treated as headers |
| JSON → INI | Produces a flat INI file from a top-level object; nested objects become [sections] |
| INI → JSON | Parses an INI file back to a JSON object |
| → Markdown table | Renders a top-level array of objects as a Markdown table |
Click ⚙️ Transform to apply structural transformations to the parsed document.
| Transform | What it does |
|---|---|
| Sort keys A→Z | Recursively sorts all object keys alphabetically |
| Sort keys Z→A | Recursively sorts all object keys in reverse |
| Sort array by field | Sorts a top-level array of objects by a chosen key; supports ascending and descending |
| Remove nulls | Deletes all keys whose value is null |
| Remove empty strings | Deletes all keys whose value is "" |
| Remove empty arrays | Deletes all keys whose value is [] |
| Flatten | Collapses nested objects to dot-notation keys (e.g. a.b.c) |
| Unflatten | Expands dot-notation keys back to a nested structure |
| Rename keys | Bulk find-and-replace on key names across the entire document |
| JS transform | Apply a custom JavaScript expression — receives the parsed value as data, must return the new value |
data.filter(x => x.active) or Object.fromEntries(Object.entries(data).reverse()).Click 🔍 Query to run queries against the current document.
Run JSONPath expressions against JSON or YAML documents.
| Syntax | Meaning |
|---|---|
$ | Root of the document |
.key | Child key |
[n] | Array index |
[*] | All items in an array |
..key | Recursive descent — find key at any depth |
?(expr) | Filter — e.g. $.items[?(@.price > 10)] |
Results are shown as a JSON array below the query field.
Run XPath 1.0 expressions against XML documents (or against JSON/YAML after conversion to XML). Uses the browser's native document.evaluate().
Filter the raw text of the document by regular expression. Matching lines are highlighted in the output.
Takes a top-level array of objects and displays it as a sortable HTML table for quick visual inspection.
Click 📋 Schema to work with JSON Schema.
Paste a JSON Schema into the schema field and click Validate. Validation uses Ajv 6 and reports all errors with their paths and messages.
Click Infer schema to generate a JSON Schema from the current document. The inferred schema captures types, required fields, and nested structure.
Click Generate mock to produce a sample document that conforms to the current schema. Useful for testing and placeholder data.
Click Infer TS types to generate TypeScript interface definitions from the current JSON document. Nested objects become named interfaces in PascalCase.
Click ⚡ Diff to compare two documents.
Paste two documents into the left and right text areas and click Text diff. A line-by-line diff is shown below, with added lines in green and removed lines in red. The diff is capped at 300 lines per side to keep the UI responsive.
Click Semantic diff to compare the two documents structurally, independent of formatting or key order. Each difference is reported as a path with the old and new values — ideal for spotting what actually changed between two versions of an API response.
Click 🔐 Encode to encode or decode strings. Type or paste into the input field and click the operation button.
| Operation | Description |
|---|---|
| Base64 encode / decode | Standard Base64; handles Unicode correctly |
| URL encode / decode | encodeURIComponent / decodeURIComponent |
| HTML unescape | Converts &, <, etc. back to characters |
| Unicode escape / unescape | Converts to/from \uXXXX notation |
| JSON string escape / unescape | Escapes a raw string for use inside a JSON string value, and the reverse |
The last 10 documents you worked with are saved automatically in localStorage.
Click 🕑 Recent to browse them. Each entry shows the format, a size indicator, and a timestamp.
Click an entry to restore the document into the current tab.
Click 🌐 URL to open the URL panel. Enter any URL that returns JSON, YAML, or XML and click Fetch. The response is loaded into the editor and parsed automatically. CORS restrictions apply — some endpoints may not be fetchable from a browser page.
Click ⌨ in the toolbar to see the full shortcut reference. The most commonly used shortcuts:
| Shortcut | Action |
|---|---|
Ctrl+Z | Undo |
Ctrl+Y / Ctrl+Shift+Z | Redo |
Ctrl+P | Pretty-print |
Ctrl+M | Minify |
Ctrl+S | Save / download file |
Ctrl+O | Open file |
Ctrl+D | Toggle dark/light theme |
Ctrl+T | Toggle tree view |
Ctrl+/ | Toggle comment (in editor) |
Tab | Indent selected lines |
Shift+Tab | Dedent selected lines |
The app starts in dark mode (Catppuccin Mocha palette).
Click the moon/sun icon or press Ctrl+D to toggle to light mode.
Your preference is saved in localStorage.
The Swiss Army Knife processes everything locally in your browser. No data is transmitted to any server — not the documents you paste, not the schemas you validate against, not the URLs you fetch content from. The only network request the app makes is when you explicitly click 🌐 URL to fetch a remote document.
All persistent state (tabs, recent documents, theme preference) is stored in localStorage in your browser and never leaves your device.
.json · .yaml · .yml · .xml
Technologies used:
Built with: