shadcn.io is not affiliated with official shadcn/ui
JSON Path Browser Command Menu Block for Solid
A payload inspector's path browser as a command menu shown open beside a value pane: the keys of an object or array with their type as a word, a path bar in monospace, the arrow keys going in and out, a typed path that jumps there, and a copy path button.
Installation
Overview
Move through a response the way you read it with this JSON path browser command menu for Solid with Ark UI. It opens from the Response screen of Bracegate, a payload inspector, whose header holds an outline field with its ⌘ K cap, and the response is drawn under a soft scrim inside a hairline frame with a plus mark on each corner: a request bar whose chip holds the path you last selected, and the body as indented bars. The menu is the catalog Command under a path bar in monospace, $.items[0], set left to right on every page. The list shows the keys of that object or the items of that array, each with its type as a word (string, number, boolean, object, array or null), a preview of its value and a chevron where it can be entered. The arrow toward the end, or Enter, goes into an object or array; the arrow toward the start, or Backspace on an empty input, or the Up button, goes out. Typing a path such as $.items[0].id jumps there as you type: the bar and the list follow the text and Enter selects the key. A pane beside the list shows the highlighted node with the catalog JsonTreeView for a branch and its value for anything else, and Copy path, or Alt and C, really copies its path. The payload is typed and made up. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog, wider, with the same level and query. For API clients, log viewers, config editors and any tool that opens a document too deep to scroll.
FAQ
Why is the menu already open, and what do I keep?
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.
How does typing a path jump there?
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.
Which keys go in and out, and do they fight the input?
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.
What does Copy path copy?
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.
What stays local, and how do I wire 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.
Is it accessible from the keyboard?
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 combobox and the first is highlighted when a level opens. The pane is a labelled region that is not read out as you move; the list announces the rows.