Home › Developer Tools › JSON Editor
JSON Editor
Open or paste JSON and edit it two ways at once: a tree where you add, rename, reorder and retype values with a click, and a code view that stays in sync and checks every keystroke. Undo anything, then download the result.
Last updated:
Tree
$
The code has an error.
Fix it on the right to keep editing the tree.
Fix it on the right to keep editing the tree.
Drag to reorder or move into another object/array. Alt + ↑/↓ moves the focused row.
Code
Valid JSON
Advertisement
Advertisement
How to use the JSON Editor
- Open a JSON file, paste JSON into the code view, or start from the sample or an empty object.
- Edit in the tree: click a key or value to change it, use the type menu to convert it, and + to add a key or item.
- Reorder by dragging the ⋮⋮ handle, with the ↑ ↓ buttons, or with Alt + arrow keys. Drop onto the middle of an object or array to move a node inside it.
- Or edit the code directly. Valid changes update the tree instantly; errors are shown with their line and column.
- Undo any mistake, choose the indentation, then Download or copy your JSON.
Tree editor actions
| To do this | In the tree | Keyboard |
|---|---|---|
| Change a value | Click the value, type, then press Enter or click elsewhere | Tab to the field, Enter to apply |
| Rename a key | Click the green key name and type | Enter to apply |
| Add a key or item | + on an object or array row | Tab to +, then Enter |
| Change the type | The small type menu (object, array, string, number, boolean, null) | Arrow keys in the menu |
| Reorder | Drag ⋮⋮, or the ↑ ↓ buttons | Alt + ↑ / Alt + ↓ |
| Move into another container | Drop onto the middle of an object or array row | - |
| Copy a node | ⧉ duplicates it right below | - |
| Delete | ✕ on the row | - |
| Undo / redo | ↶ Undo and ↷ Redo buttons | Ctrl + Z / Ctrl + Y (outside text fields) |
| Collapse or expand | ▸ / ▾ or click the { n keys } summary | Enter on the arrow |
JSON value types
| Type | Example | Notes |
|---|---|---|
| object | {"id": 7, "name": "Ann"} | Keys are always double-quoted strings. Order is kept but has no meaning to most programs. |
| array | [1, "two", null] | Ordered list; items can mix types. |
| string | "Hello\nWorld" | Double quotes only; line breaks, tabs, quotes and backslashes are escaped. |
| number | 42, -3.5, 1.2e6 | No leading zeros, no +, no NaN or Infinity. Many parsers lose precision beyond 253. |
| boolean | true, false | Lowercase only. |
| null | null | An intentionally empty value. |
Tips for editing JSON safely
- Use the tree for structure, the code for bulk edits. Reordering, retyping and adding keys is quicker in the tree; pasting a long block or search-and-replace is quicker in the code view.
- Watch the status bar. It shows the number of keys, array items and nesting depth, so you can see at a glance whether a paste or delete did what you expected.
- Copy the path of the selected node (for example
$.sizes[1].available) to use in code, JSONPath queries or documentation. - Keep IDs as strings when they have leading zeros or more than 15 digits, such as ZIP codes or Twitter-style IDs, so other programs cannot round or trim them.
Frequently asked questions
How do I edit a JSON file?
Open the file with Open file or paste its content into the code view. Change values directly in the tree or in the code, then press Download JSON to save the edited file. Your edits stay in your browser; nothing is uploaded.
What happens when I change a value's type?
The value is converted where it makes sense: the string "42" becomes the number 42, a number becomes its text, an array becomes an object with keys 0, 1, 2 and an object becomes an array of its values. A string that contains JSON, such as "[1,2]", is parsed into a real array or object.
Will the editor change my numbers or key order?
No. Keys stay in the order you wrote them, even numeric keys that JavaScript would normally sort first, and numbers keep their exact digits, so large IDs such as 9007199254740993 are not rounded.
Why is the tree locked?
The code view contains invalid JSON, so it cannot be shown as a tree. The status bar under the code shows the line, column and reason; fix it or press Undo and the tree unlocks.
Can I move a value into another object or array?
Yes. Drag the ⋮⋮ handle onto the middle of an object or array row to move it inside, or onto the top or bottom edge of any row to place it before or after. A value moved into an object from an array gets a unique key such as item, which you can rename.
What does a highlighted key mean?
The same key appears twice in one object. JSON allows it, but most parsers keep only the last value, so rename or delete one of them.
How large a file can I edit?
Files of several megabytes work. For big documents, deeper levels start collapsed and the tree shows up to 3,000 rows at a time; the code view always holds the whole file.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
JSON ViewerExplore JSON as a collapsible tree, search keys and values and copy any node's path.JSON FormatterBeautify, minify and validate JSON, with a collapsible tree view.JSON ValidatorCheck JSON with the exact line and column of each error, fix tips and one-click auto-fix.JSON Repair ToolFix broken JSON automatically: trailing commas, quotes, comments, truncated data, with a diff.Online Python CompilerRun Python 3 in your browser with input(), numpy, pandas, charts and share links.Unzip FilesOpen and extract ZIP files online.RAR & 7z ExtractorOpen RAR, 7z and other archives online and extract files.Regex TesterTest and debug regular expressions live.File Info ViewerCheck file size, type, date and MD5/SHA hashes.SQLite ViewerOpen .db and .sqlite files in your browser, browse tables and run SQL queries.DOCX ViewerOpen and read Word .docx files in your browser, then print or save them as HTML.EPUB ReaderOpen and read EPUB e-books in your browser with pages, a table of contents and font controls.What Is My BrowserSee your browser, version, OS, engine, screen and which web features it supports.Font ViewerPreview TTF, OTF, WOFF and WOFF2 fonts with sample text, waterfall, glyphs and metadata.Markdown EditorWrite Markdown with a toolbar, live split preview, autosave and .md or HTML export.Regex Cheat Sheet75+ ready-to-use regex patterns for emails, URLs, IPs and dates, each with a live test box.JavaScript Keycode FinderPress any key to see its JavaScript key, code, keyCode, which, location and modifiers.QR Code ScannerScan QR codes with your camera or from an image and safely read the link or text.RAID CalculatorUsable capacity, efficiency and fault tolerance for RAID 0, 1, 5, 6, 10, 50 and 60 arrays.JSONPath TesterTest JSONPath expressions live: filters, slices, wildcards and recursive search, with matches highlighted.Mermaid Diagram EditorWrite Mermaid code and see flowcharts, sequence, Gantt and ER diagrams live. Export SVG or PNG.Country Codes ListSearch ISO 3166 alpha-2, alpha-3 and numeric country codes with calling codes and TLDs.CSS Selector TesterTest CSS selectors on your HTML: highlighted matches, match count and specificity.Git Cheat SheetSearchable Git command reference by task, with copy buttons and an undo/rename/fix wizard.HAR File ViewerOpen a .har file to see a waterfall timeline, headers, bodies, timings and size totals.jq PlaygroundRun jq filters on JSON in your browser with live output, flags and an example library.Markdown Cheat SheetInteractive Markdown syntax reference: edit every example and see the live rendered preview.Regex ExplainerPaste a regular expression and get a plain-English breakdown, railroad diagram and flag notes.XPath TesterTest XPath expressions on XML or HTML: highlighted matches, node paths, values and examples.EML File ViewerOpen .eml email files to read the message, headers and raw source and save attachments.Graphviz Online ViewerWrite Graphviz DOT code and render graphs live; switch layout engines, export SVG or PNG.JavaScript Online CompilerWrite and run JavaScript in your browser with a console, timing, error lines and share links.Jupyter Notebook ViewerOpen .ipynb files and read code, Markdown, math, tables, plots and errors without Python.LaTeX Table GeneratorEdit a table like a spreadsheet or paste from Excel and get LaTeX tabular or booktabs code.Log File ViewerOpen huge log files with level colors, regex and time filters, JSON pretty-print and tail -f.Logic Gate SimulatorBuild logic circuits with AND, OR, NOT, XOR gates and flip-flops; see live outputs and truth tables.MSG File ViewerOpen Outlook .msg emails in your browser: sender, recipients, body, headers and attachments.Online Code EditorVS Code-style editor in your browser: tabs, 50+ languages, find/replace, autosave.MDB File ViewerOpen Access .mdb and .accdb databases in your browser: list tables, view rows, export CSV.Shapefile ViewerView zipped shapefiles on a map with the attribute table, then export to GeoJSON or CSV.Online Hex EditorOpen any file as hex and ASCII, edit bytes, search, inspect values and save the result.PHP Online CompilerRun PHP 8 code in your browser with output, HTML preview, error lines and share links.PlantUML EditorWrite PlantUML and see sequence, class, activity and more diagrams live. Export SVG or PNG.Sorting Algorithm VisualizerWatch bubble, insertion, merge, quick, heap and radix sort step by step with live counters.Lottie ViewerOpen Lottie JSON or .lottie files to play, pause, scrub frames, change speed and see details.Diff ViewerPaste a git diff or .patch file and view it side by side or inline, with file navigation.EditorConfig GeneratorBuild an .editorconfig with indent, charset, line endings and trim rules per file pattern.Folder Compare ToolCompare two folders by file list, size and SHA-256 hash, then open a text diff of changed files.Glob Pattern TesterTest glob patterns like **/*.js, {a,b} and !exclusions against a list of file paths.JMESPath TesterEvaluate JMESPath expressions against JSON live, the query language used by the AWS CLI.MongoDB Query TesterTest MongoDB find filters, projections and aggregation pipelines on sample JSON documents.Semantic Version CalculatorBump, compare, sort and test SemVer versions against npm ^, ~ and x ranges.XSLT TesterRun an XSLT 1.0 stylesheet on XML in your browser and see the output as HTML, XML or text.ASCII Diagram EditorDraw boxes, arrows and text on a character grid and copy plain-text diagrams for code and READMEs.DBF File ViewerOpen dBase .dbf files and shapefile tables, search and sort records, export CSV or XLSX.MBOX File ViewerOpen .mbox mail archives: list and search messages, read them, save attachments, export EML.