fetaUI
GitHub

JSON View

An API response explorer: a tree you can fold, search and copy from.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/json-view
Playground
GET/v1/orders/ord_8Kd2Q720084 ms
order: 13 keys
id: "ord_8Kd2Q7"
object: "order"
status: "fulfilled"
livemode: false
created: 1757851200
currency: "usd"
amount_total: 48600
discount: null
orderobject, 13 keys
Default
GET/v1/orders/ord_8Kd2Q720084 ms
order: 13 keys
id: "ord_8Kd2Q7"
object: "order"
status: "fulfilled"
livemode: false
created: 1757851200
currency: "usd"
amount_total: 48600
discount: null
orderobject, 13 keys

Try searching for refund, then use the arrow keys

Expanded
GET/v1/orders/ord_8Kd2Q720084 ms
order: 13 keys
id: "ord_8Kd2Q7"
object: "order"
status: "fulfilled"
livemode: false
created: 1757851200
currency: "usd"
amount_total: 48600
customer: 5 keys
id: "cus_R3vL9"
name: "Emma Collins"
email: "emma@feta.example"
phone: null
discount: null
orderobject, 13 keys
Collapsed
GET/v1/orders/ord_8Kd2Q720084 ms
orderobject, 13 keys
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/json-view

Accessibility

  • A tree with levels, expanded and selected states.
  • The match count is announced.

Motion

  • Carets turn in 200 ms and rows wash on selection.
  • With reduced motion, carets snap.

Responsive behavior

  • Rows stay 30 px. The hint hides on Mobile.

Performance

  • Visible rows, matches and forced open paths are each memoized.
  • Only open branches render, so a large folded payload stays light.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import JsonView and the JsonValue type. Props: data, rootName, request, defaultOpen, hint, animated.
  • defaultOpen lists key paths such as order.customer, and an empty list folds everything. rootName, root by default, starts each path.
  • It is a keyboard tree with search and copy. request is only a label: it fetches nothing.
/docs/components/json-view/markdown
PreviousCode Output
NextCarousel

Related

Code BlockComponentCode on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.Tree ViewComponentA file tree with guides, inline renaming and the selected path in the footer.Request LogComponentOne request in mono, and a windowed list for live tails of any length.SearchComponentA search field and a command palette for finding anything and running commands.