JsonViewSection - Admin Components

Note: This component is available since Medusa v2.21.0.

The JsonViewSection component shows a section with the number of keys in an object, and a button that opens a drawer with the object's formatted JSON. The Medusa Admin shows this section at the bottom of its detail pages.

Code
import { JsonViewSection } from "@medusajs/dashboard/components"

Example#

Use JsonViewSection in a widget or UI route to let the user inspect a record's raw data:

Code
1import {2  JsonViewSection,3} from "@medusajs/dashboard/components"4
5const BrandJsonSection = ({ brand }) => {6  return <JsonViewSection data={brand} />7}

In the drawer, Medusa collapses nested objects beyond the first level, and the user can click the copy icon next to a value to copy it to the clipboard.


Props#

The component accepts the JsonViewSectionProps type:

Loading...
Was this page helpful?
Ask Bloom
For assistance in your development, use Claude Code Plugins or Docs MCP server in Cursor, VSCode, etc...FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break
⇧↵