Free Online JSON Editor - Text, Tree & Table Modes

A JSON editor is an online tool that lets you inspect and change a JavaScript Object Notation document without installing VS Code, IntelliJ, or a desktop JSON IDE. A formatter pretty-prints. A viewer expands nodes. This page keeps one document in three writable views: text mode for the raw RFC 8259 source, tree mode for nested keys you can expand and edit, and table mode for arrays of objects that deserve rows and columns. Edits in the tree or table write back to the same in-memory value and re-serialize with two-space indentation.

The default document is {"name":"Ada","ok":true,"n":1}. Text mode shows that object as source. Tree mode expands name, ok, and n so you can change the string, the boolean, and the number. Table mode refuses that default on purpose: a single object is not an array of rows. Wrap it as [{"name":"Ada","ok":true,"n":1}] and the grid appears with three columns. That pair of checks is why this route exists instead of stretching the JSON viewer.

JSON powers REST and GraphQL responses, package.json, CloudFormation, Kubernetes ConfigMaps, MongoDB documents, and browser localStorage dumps. People still paste broken drafts with comments or trailing commas because those are legal in JSON5 and in JavaScript object literals. This editor follows ECMA-404 / RFC 8259. Invalid source is flagged with the first line and column. Repair a messy draft on the JSON repair tool, or confirm the JSON5 dialect on the JSON5 validator, then paste strict JSON back here.

"Offline JSON editor" means the page is a client-side JavaScript application. After HTML, CSS, and script load, parsing does not need the network. There is no file upload, no account, and no round-trip to a hosted lint API. The draft sits in localStorage under the unique key json-editor-data for up to 30 days. That is a convenience, not a backup and not a database.

Editing on this page takes under a minute. The document is one value shared across modes.

1. Paste or keep the default document - The default object is {"name":"Ada","ok":true,"n":1}. Replace it with your payload. Invalid RFC 8259 JSON is flagged with a line and column before tree or table can run.
2. Choose text, tree, or table - Text mode edits the source. Tree mode expands keys so you can change primitives in place. Table mode needs an array of objects; the default single object shows a fallback instead of a fake grid.
3. Edit values and copy - Changes in tree or table rewrite the same document and pretty-print it with two-space indent. Click Copy when the preview matches what you want. Nothing is uploaded.
4. Clear, fullscreen, or resize - Clear restores the Ada object. Fullscreen hides this article so a deep tree can use the screen. On a wide desktop, drag the unique json-editor-split-track handle; width is remembered in json-editor-panel-width.

Load the page. The left panel already contains the Ada object. Text mode is a textarea of RFC 8259 source. Switch to tree: you should see three children - name = Ada, ok = true, n = 1. Change n to 2. Switch back to text. The source now includes "n": 2. That write-through is the gold-standard check for this editor.

Switch to table with the default still a single object. You get a fallback message, not a one-row spreadsheet pretending a map is a list. Wrap the object in square brackets so the root is an array of one object. Table mode then shows columns name, ok, and n. Edit a cell. Copy. You now have a JSON array you can paste into a test fixture or into JSON to CSV.

Extra drills on the same page: paste a trailing comma and read the line/column banner instead of a silent tree. Paste JSON5 unquoted keys and watch parse fail - then repair on JSON repair and come back. Duplicate a key in text mode; after parse, only the later key survives, because that is what JSON.parse does.

Reach for an editor when the job is to change a value, not only to stare at a tree or pretty-print a payload.

These pages share an origin and a data format. They do not share a job. Use the table when you are about to open the wrong tab.

jq can map and reduce. This editor cannot. GraphQL asks a server for a shaped response; this page only edits JSON you already have. SQL joins tables; table mode never joins two documents. If you need a graph layout, use JSON to graph. If you need minify-only, use the JSON minifier.

JSON types in this tree are the RFC 8259 set: object, array, string, number, boolean, and null. There is no Date, no undefined, no NaN, and no comment node. Strings are quoted. Numbers are IEEE-754 doubles in JavaScript - a 64-bit integer used as an id can round if you edit it here. Keep large ids as strings.

Text mode is the source of truth you paste and copy. It is not a full IDE: no multi-cursor, no schema-aware autocomplete, no format-on-save besides the two-space re-serialize after a tree or table edit. If you only wanted indentation, the JSON formatter is the specialized page.

Tree mode is for nested maps. Expand a node, edit a primitive, and the document rewrites. Renaming keys in bulk, reordering object keys as a first-class action, and jq-style filters are out of scope. Duplicate keys in the source collapse after parse; the later key wins. That is the language, not a bug in the tree widget.

Table mode is a grid, not a database. Spreadsheet mental models assume rows. JSON does not. An object is a map; an array is a list. A table that pretends tsconfig.json is a CSV will hide structure or invent columns. This page only draws a grid when every element of an array is a non-array object. Nested objects inside a cell stringify so you can still edit them as JSON text. The reverse of a successful table is often CSV - that conversion is JSON to CSV. The other direction is already on CSV to JSON.

• Trailing comma or comment. RFC 8259 forbids both. You get line and column. Repair or strip comments; do not expect Auto Fix here.
• Single quotes / unquoted keys. Legal in JavaScript and JSON5, illegal here. Use the JSON5 validator or JSON repair, then paste strict JSON.
• Table fallback on Ada. Not a crash. Wrap the object in an array when you want columns.
• Mixed arrays. [1, {"a":2}] will not become a grid. Use tree mode.
• Large integers. Editing a snowflake id in the tree can round it. Keep it a string.
• Huge documents. Expanding a million-node tree stalls the tab. Use the JSON file processor for 20–50 MB files in a worker.
• Not a database, not NDJSON, not jq. One JSON value in, one JSON value out. Concatenated objects are a repair problem, not an editor feature.

Parsing, tree rendering, and table edits run in your browser with JavaScript. After the page loads, the editor still works if the network drops. The document is stored only in this browser's localStorage under json-editor-data for up to 30 days. It is never sent to DevOkk servers. Click Clear to restore the Ada sample. Clearing site data for this origin deletes the saved draft as well.

Pasting secrets into any web origin is still a habit to avoid. This page does not upload the document, but extensions, screenshots, and shared machines still see the textarea. Use sample data. If a payload contains production tokens, rotate them rather than treating a browser tool as a vault. Typical sensitive pastes to avoid:

• REST responses with personal data (PII)
• JWT access tokens and OAuth payloads
• Production database exports
• Config files with API keys or connection strings
• Healthcare or financial records subject to compliance rules