JSON Path Browser Command Menu Block for React

So you can see it without a click. On load the menu is the Command and its pane drawn inline over a picture of the response, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the level you reached in the copy is the level the dialog opens at. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Text that starts with a dollar sign is read as a path. The block walks it step by step (.key and [0]), and while the last step may still be growing it takes it as the key typed so far: $.items[0]. lists everything inside the first item, $.items[0].st keeps the keys that start with st, and $.items[0].id leaves the one key. The path bar and the list follow the text as you type, so the jump needs no Enter; Enter on a key then selects it, or goes into it if it is an object or array. A path that points nowhere says so and offers to start over. Anything else you type filters the open level by key and by value.

They only act when they mean nothing else. The arrow toward the end goes into the highlighted object or array only while the caret is at the end of the text, so it still moves the caret in the middle of a path. The arrow toward the start and Backspace go up only while the input is empty. Alt and C copies the highlighted node's path. In a right-to-left page the two arrows swap and the hints in the foot mirror with them; the path itself stays left to right.

The path of the node in the pane, written as JSONPath ($.items[0].customer.id), through the clipboard; the status line says what was copied, or that the browser refused. It is the node you have highlighted, not the one you last selected, so you can copy a path without choosing it.

All of it. The payload is a typed constant, nothing is requested and choosing a leaf only moves the chip in the drawing. In your app replace PAYLOAD with the parsed response; the helpers read it as plain unknown values, so any JSON works, and pick is where you scroll your own viewer to the node.

Yes. Type to filter, the arrow keys move through the rows, Enter goes in or selects and Escape closes the menu and puts focus on the field; the Up button and Copy path are in the tab order, and the pane's value region takes focus so it can be scrolled. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The pane is a labelled region that is not read out as you move; the list announces the rows.

The pane sits under the list at about two fifths of the height instead of beside it, the copy shown on load docks to the top of the page at full width, the key hints go and the count stays. The Up button and the rows are the way in and out, since there is no arrow key.