🦄 3.4.0 — the JSON viewer you can type into
Hey everyone 👋
JsonTree renders a JSON object as a collapsible tree. Until today it was strictly read-only. Now you can click a value and type into it.
What is new
Click a string or number → inline editor. Enter commits, Escape cancels, blur commits.
Click a boolean → it just toggles. There is nothing to type.
Enter on a focused row opens that row's editor, so the whole thing works from the keyboard — without giving every value its own tab stop, which would make a big tree impossible to tab past.
isEditable locks individual nodes, validate rejects a value inline, and editableTypes narrows what is editable at all.
All opt-in behind one editable prop. If you do not pass it, nothing about the read-only render changed.
The interesting part
This started as a request from a user who was explicit about wanting values only — not renaming keys, not reordering. Taking him at his word turned out to be the right call, because two things had to be fixed before a single keystroke could land.
The first: the paths were labels, not addresses. They join keys with dots, so { 'a.b': 1 } and { a: { b: 1 } } both display as root.a.b, and an array index looks exactly like a numeric key. Fine for showing a user where they are; useless as the target of a write. Nodes now carry a real segment list alongside the display path.
The second: Mantine's Tree component fights inline inputs. It owns keyboard navigation on the tree item and calls preventDefault on the arrow keys and on Space — so a text field inside a node cannot accept a space, and its caret cannot move. The input simply stays empty. The editor now stops those events before they escape it.
A takeaway you can use elsewhere
When you write into a nested structure, rebuild only the spine down to the target and carry everything else across by reference. That way a Date, a Map, a Set, a RegExp or a React element somewhere else in the object keeps its identity. A structuredClone or a JSON round-trip would quietly flatten or destroy every one of them — and you would find out much later.
Questions for you
Would you want key renaming next, or is editing values the 90% case?
If you build debug or admin UIs: does an editable JSON tree belong in them, or do you prefer a form?
Replies