In this section · 05 Edit itEdit
05 · Edit it
Edit a document
Change a value, add or delete a key, switch a type, reorder a list — in the text, in the tree, in the table or on the graph, each as one undo.
There are two ways to change a document here, and the second one is the reason this page exists. You can edit the text, which is what any editor lets you do, and you can edit the structure — pick a row, change its value, add a key beside it, drag it somewhere else — without touching a brace or a comma. Both act on the same document, and whichever you use, the other side of the editor updates as you go.
Structural editing is not a convenience for people who dislike punctuation. It removes a whole class of mistake: a value changed in a row cannot leave a trailing comma behind, a deleted item takes its separator with it, and an inserted key arrives already quoted. On a deeply nested document, where the closing brackets are forty lines below the thing you are changing, that is the difference between an edit and a repair.
Nothing on this page has a result you can print, and the blocks say so plainly. What comes out of an edit is the document you just typed; the thing worth describing is what the editor does around it — where the change lands, what it keeps, and how to take it back.
Change a value
Input
A row in the tree whose value is wrong: replicas is 2 and should be 3.
Do
- Select the row and press Enter, or double-click the value.
- Type the new value and press Enter again.
Result
The value is replaced and the text on the other side of the editor follows at once. Escape during the edit abandons it and changes nothing.
Select a row in the tree and press Enter, or double-click the value, and it becomes editable in place. Type, press Enter again, and it is committed. Escape abandons the edit and leaves the document exactly as it was, so starting one is not a decision you are stuck with.
The change lands in the document as a single edit, which means the text on the other side of the editor updates at once and the caret there does not jump around. A string stays a string: typing 3 into a field that held "2" gives you "3", not the number. Changing what kind of value it is is a separate move, below, because it is a separate intention.
Add and delete
Input
An object that needs one more key, and an array with an item you no longer want.
Do
- Select a row and use the Add action to put a new key or item beside it.
- Select the unwanted row and use Delete.
Result
The key or item is inserted next to the row you were on, and the deletion takes its comma with it — there is no half-edited document to tidy up afterwards.
Add puts a new key or item next to the row you are on — inside it when the row is an object or an array, beside it when it is a plain value — and Delete removes the selected row. Both appear on the row itself, so what they will act on is never in doubt.
The punctuation is the editor’s problem, not yours. Deleting the last item of an array removes the comma before it; inserting into an empty object writes the quotes and the colon. This is the tedious part of editing JSON by hand and the part that produces documents that no longer parse, and it is worth using the row actions for that reason alone.
Change a value’s type
Input
A port written as the string "8080", which should be the number 8080.
Do
- Select the row and choose the type you want from the row’s type control.
Result
The value changes type in place. Going from a string to a number keeps the digits; going from a value to an object or an array cannot keep it, and the editor says so before it does it.
A port that arrived as "8080" and should be 8080 is a type problem, not a value problem, and it is one of the most common things people come here to fix. Changing a row’s type converts the value in place rather than making you delete it and type it again.
What is kept depends on where you are going. String to number keeps the digits; number to string keeps them too. Going from a plain value to an object or an array cannot keep anything — there is nowhere for the old value to go — and the editor says so before it does it rather than quietly discarding what was there. That warning is the point: a destructive conversion you were not expecting is exactly the edit you would not notice until much later.
Reorder and move
Input
An array whose third item belongs at the top.
Do
- Drag the row by its handle and drop it where you want it.
Result
The item moves and everything after it shifts up. A drop is only allowed where the result would still be a valid document, so a row cannot land inside itself.
Rows can be dragged to a new position. In an array that reorders the items and everything after the moved one shifts up or down, which is a real change to the data — the order of an array is information, unlike the order of an object’s keys.
A drop is only offered where the result would still be a valid document. You cannot drop a row inside itself, and you cannot drop an item into a position that does not exist. Rather than accepting the drag and then reporting an error, the editor simply does not offer those landing spots, so the gesture either works or does not start.
Edit in the Table
Input
Twenty records, three of which are missing a field the rest have.
Do
- Switch the pane to Table.
- Click the empty cell in the column that record is missing, and type the value.
Result
A missing cell is filled by inserting the key into that record, not by writing null into it — so the record ends up shaped like its neighbours.
For a list of similar records, the Table view is the fastest place to edit. Cells are editable in place, and moving along a row or down a column is the same motion it is in a spreadsheet, so fixing the same field in twenty records is twenty keystrokes rather than twenty journeys through a tree.
The interesting case is the empty cell — a record that is missing a key the others have. Typing into it inserts that key into that record, rather than writing a null into a field that already exists, so the record ends up shaped like its neighbours. Those two outcomes look the same in a grid and are entirely different in the document, which is why the gap is drawn as a gap rather than as a value.
Edit on the Graph
Input
A nested object you can see on the graph but would have to hunt for in the text.
Do
- Switch the pane to Graph and edit the value in its box.
Result
The same edits are available where the thing you are changing is a box you can point at, which is often quicker than scrolling a deep document.
The graph offers the same edits, with the difference that what you are changing is a box you can point at. On a document whose structure you are still learning, that is often quicker than finding the same value in a tree you would have to scroll — you can see where it sits before you touch it.
It is the same document and the same undo history, so an edit made on the graph and an edit made in the text are indistinguishable afterwards. Which view you work in is a matter of what you are doing rather than a choice with consequences.
Every action is one undo
Input
Press Repair on a broken config, then Format, then drag a row — three changes.
Do
- Press ⌘Z on a Mac, or Ctrl+Z on Windows and Linux, three times.
Result
Each press undoes one whole action, not one character of it. A repair that fixed nine things comes back out in one step.
Every action in the editor lands as one change. A repair that fixed nine separate things, a Format that rewrote every line, a drag that moved a row, an extract that wrote a new document into the other pane: each is a single step, and one ⌘Z on a Mac — Ctrl+Z on Windows and Linux — takes it back whole.
This is the fact that makes the rest of the editor reasonable to explore. If pressing an unfamiliar button might cost you an unknown number of undos to reverse, the sensible thing is not to press it, and half the tool goes unused. Because everything is one step, the sensible thing is to press it and look — which is how every guide on this site expects to be read.
Editing text and editing structure at the same time
In the default mode both panes show the same document, so you can type in the text on one side and watch the tree change on the other. Nothing has to be applied or synchronised: they are two views of one thing, and a change made in either is the same change.
While the text does not parse, the structural views cannot follow it — there is no tree to draw for a document that is not a document yet. They hold the last good state and the text side marks what is wrong, so you are never editing against a view that is quietly out of date. Fix the error and the other pane catches up immediately.
Keyboard, and where the caret goes
The structural views are navigable from the keyboard: the arrow keys move between rows, the left and right arrows fold and unfold a branch, and Enter starts an edit on whatever is selected. A whole pass of corrections down a list of records can be made without reaching for the mouse, which is the difference between fixing three records and fixing three hundred.
Selection survives an edit. When a value is committed, the row you were on stays selected rather than the view resetting to the top, so a sequence of edits down the same branch does not mean finding your place again after each one. The same is true after an undo: what comes back is selected, so you can see what changed.
What editing never does
It never reformats the parts you did not touch. Your indentation, your line breaks and your key order survive an edit, so a review of the result shows the change you made rather than a whole-file rewrite around it. Reformatting is a separate command you ask for deliberately.
It never rounds a number. Values are kept exactly as they are written, digit for digit, including integers too large for a JavaScript number to hold — an identifier that arrived as a twenty-digit number comes back out as the same twenty digits.
And it never leaves the tab. Every edit happens in this page, on your machine, with no request to any server, which is what makes it reasonable to fix a production config here rather than in a tool that would upload it first.
Open the editor and change something — one undo puts it back. To check the result against another document or a schema, go on to One document or two: the editor’s four modes.