---
sidebar_label: "JSON View"
---
import { TypeList } from "docs-ui"
export const metadata = {
title: `JSON View - Admin Components`,
}
# {metadata.title}
Detail pages in the Medusa Admin show a JSON section to view the current page's details in JSON format.
To create a component that shows a JSON section in your customizations, create the file `src/admin/components/json-view-section.tsx` with the following content:
```tsx title="src/admin/components/json-view-section.tsx"
import {
ArrowUpRightOnBox,
Check,
SquareTwoStack,
TriangleDownMini,
XMarkMini,
} from "@medusajs/icons"
import {
Badge,
Container,
Drawer,
Heading,
IconButton,
Kbd,
} from "@medusajs/ui"
import Primitive from "@uiw/react-json-view"
import { CSSProperties, MouseEvent, Suspense, useState } from "react"
type JsonViewSectionProps = {
data: object
title?: string
}
export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
const numberOfKeys = Object.keys(data).length
return (
JSON
{numberOfKeys} keys
}
>
} />
(
null
)}
/>
(
undefined
)}
/>
{
return (
{Object.keys(value as object).length} items
)
}}
/>
:
{
return
}}
/>
)
}
type CopiedProps = {
style?: CSSProperties
value: object | undefined
}
const Copied = ({ style, value }: CopiedProps) => {
const [copied, setCopied] = useState(false)
const handler = (e: MouseEvent) => {
e.stopPropagation()
setCopied(true)
if (typeof value === "string") {
navigator.clipboard.writeText(value)
} else {
const json = JSON.stringify(value, null, 2)
navigator.clipboard.writeText(json)
}
setTimeout(() => {
setCopied(false)
}, 2000)
}
const styl = { whiteSpace: "nowrap", width: "20px" }
if (copied) {
return (
)
}
return (
)
}
```
The `JsonViewSection` component shows a section with the "JSON" title and a button to show the data as JSON in a drawer or side window.
The `JsonViewSection` accepts a `data` prop, which is the data to show as a JSON object in the drawer.
---
## Example
Use the `JsonViewSection` component in any widget or UI route.
For example, create the widget `src/admin/widgets/product-widget.tsx` with the following content:
```tsx title="src/admin/widgets/product-widget.tsx"
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { JsonViewSection } from "../components/json-view-section"
const ProductWidget = () => {
return
}
export const config = defineWidgetConfig({
zone: "product.details.before",
})
export default ProductWidget
```
This shows the JSON section at the top of the product page, passing it the object `{ name: "John" }`.