51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T282f,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; type HttpStatus = | "info" | "success" | "redirect" | "client-error" | "server-error"; interface ApiResponse { status: number; statusText?: string; headers?: Record; body?: unknown; timing?: { dns?: number; connect?: number; ttfb?: number; download?: number; total: number; }; } interface ApiResponseViewerProps { response: ApiResponse; defaultTab?: "body" | "headers" | "timing"; className?: string; } function getStatusType(status: number): HttpStatus { if (status >= 100 && status < 200) return "info"; if (status >= 200 && status < 300) return "success"; if (status >= 300 && status < 400) return "redirect"; if (status >= 400 && status < 500) return "client-error"; return "server-error"; } function StatusBadge({ status, statusText, }: { status: number; statusText?: string; }) { const type = getStatusType(status); const colors: Record = { info: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", success: "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300", redirect: "bg-yellow-100 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-300", "client-error": "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300", "server-error": "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300", }; return ( {status} {statusText} ); } function JsonDisplay({ data }: { data: unknown }) { const [collapsed, setCollapsed] = React.useState>(new Set()); const renderValue = ( value: unknown, path: string, depth: number, ): React.ReactNode => { if (value === null) { return null; } if (typeof value === "boolean") { return {String(value)}; } if (typeof value === "number") { return {value}; } if (typeof value === "string") { return ( "{value}" ); } if (Array.isArray(value)) { const isCollapsed = collapsed.has(path); return ( [ {isCollapsed ? ( {value.length} items ) : (

{value.map((item, idx) => (

{renderValue(item, `${path}[${idx}]`, depth + 1)} {idx < value.length - 1 && ( , )}

))}

)} ] ); } if (typeof value === "object") { const entries = Object.entries(value as Record); const isCollapsed = collapsed.has(path); return ( {"{"} {isCollapsed ? ( {entries.length} keys ) : (

{entries.map(([key, val], idx) => (

{key} : {renderValue(val, `${path}.${key}`, depth + 1)} {idx < entries.length - 1 && ( , )}

))}

)} {"}"} ); } return String(value); }; return (

{renderValue(data, "$", 0)}

); } function HeadersTable({ headers }: { headers: Record }) { return (

{Object.entries(headers).map(([key, value]) => ( ))}

Header	Value
{key}	{value}

); } function TimingBar({ timing }: { timing: NonNullable }) { const segments = [ { key: "dns", label: "DNS", color: "bg-purple-500", value: timing.dns }, { key: "connect", label: "Connect", color: "bg-blue-500", value: timing.connect, }, { key: "ttfb", label: "TTFB", color: "bg-green-500", value: timing.ttfb }, { key: "download", label: "Download", color: "bg-orange-500", value: timing.download, }, ].filter((s) => s.value !== undefined); return (

{segments.map((seg) => (

{seg.value}ms

))}

{segments.map((seg) => (

{seg.label}: {seg.value}ms

))}

Total: {timing.total}ms

); } export function ApiResponseViewer({ response, defaultTab = "body", className, }: ApiResponseViewerProps) { const [activeTab, setActiveTab] = React.useState< "body" | "headers" | "timing" >(defaultTab); const tabs = [ { id: "body" as const, label: "Body", available: response.body !== undefined, }, { id: "headers" as const, label: "Headers", available: !!response.headers }, { id: "timing" as const, label: "Timing", available: !!response.timing }, ].filter((t) => t.available); return (

{response.timing && ( {response.timing.total}ms )}

{tabs.map((tab) => ( ))}

{activeTab === "body" && response.body !== undefined && ( )} {activeTab === "headers" && response.headers && ( )} {activeTab === "timing" && response.timing && ( )}

); } export type { ApiResponseViewerProps, ApiResponse }; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://www.tryelements.dev/r/api-response-viewer.json","proxyUrl":"https://shadcnregistry.com/r/elements/api-response-viewer","itemId":"@elements/api-response-viewer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/default/blocks/devtools/api-response-viewer/components/elements/api-response-viewer.tsx","content":"$54","type":"registry:component"}]}]]}],"$L55"]}]

API Response Viewer

Installation

Files

components

Styles