4e: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"] 4f: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"] 50: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"] 51:T2a58,import { lazy, type ReactNode, Suspense } from "react"; import { useMediaContext } from "./media-provider"; // Lazy load built-in output components for better bundle splitting const AnsiOutput = lazy(() => import("./ansi-output").then((m) => ({ default: m.AnsiOutput })), ); const MarkdownOutput = lazy(() => import("./markdown-output").then((m) => ({ default: m.MarkdownOutput })), ); const HtmlOutput = lazy(() => import("./html-output").then((m) => ({ default: m.HtmlOutput })), ); const ImageOutput = lazy(() => import("./image-output").then((m) => ({ default: m.ImageOutput })), ); const SvgOutput = lazy(() => import("./svg-output").then((m) => ({ default: m.SvgOutput })), ); const JsonOutput = lazy(() => import("./json-output").then((m) => ({ default: m.JsonOutput })), ); /** * Check if the current window is inside an iframe */ function isInIframe(): boolean { if (typeof window === "undefined") return false; try { return window.self !== window.top; } catch { // If we can't access window.top due to cross-origin restrictions, // we're definitely in an iframe return true; } } /** * Default MIME type priority order for rendering. * Higher priority types are preferred when multiple are available. * Platforms can override this with the `priority` prop. */ export const DEFAULT_PRIORITY = [ // Rich formats first "application/vnd.jupyter.widget-view+json", "application/vnd.plotly.v1+json", "application/vnd.vegalite.v5+json", "application/vnd.vegalite.v4+json", "application/vnd.vegalite.v3+json", "application/vnd.vega.v5+json", "application/vnd.vega.v4+json", "application/geo+json", // HTML and markdown "text/html", "text/markdown", // Images "image/svg+xml", "image/png", "image/jpeg", "image/gif", "image/webp", // Structured data "application/json", // Plain text (fallback) "text/plain", ] as const; type MimeType = (typeof DEFAULT_PRIORITY)[number] | string; interface MediaData { [mimeType: string]: unknown; } interface MediaMetadata { [mimeType: string]: | { width?: number; height?: number; [key: string]: unknown; } | undefined; } /** * Props passed to custom renderer functions. */ export interface RendererProps { data: unknown; metadata: Record; mimeType: string; className?: string; } /** * Custom renderer function type. */ export type CustomRenderer = (props: RendererProps) => ReactNode; interface MediaRouterProps { /** * Output data object mapping MIME types to content. * e.g., { "text/plain": "Hello", "text/html": "Hello" } */ data: MediaData; /** * Output metadata object mapping MIME types to their metadata. * e.g., { "image/png": { width: 400, height: 300 } } */ metadata?: MediaMetadata; /** * Custom MIME type priority order. Types listed first are preferred. * Defaults to DEFAULT_PRIORITY. Your custom types should come first, * followed by spreading DEFAULT_PRIORITY for fallback. * * @example * ```tsx * priority={["application/vnd.plotly.v1+json", ...DEFAULT_PRIORITY]} * ``` */ priority?: readonly string[]; /** * Custom renderers keyed by MIME type. Use this to handle MIME types * not supported by the built-in renderers, or to override built-ins. * * @example * ```tsx * renderers={{ * "application/vnd.plotly.v1+json": ({ data }) => , * "application/geo+json": ({ data }) => , * }} * ``` */ renderers?: Record; /** * Custom fallback component when no supported MIME type is found. */ fallback?: ReactNode; /** * Loading component shown while lazy-loading output components. */ loading?: ReactNode; /** * Additional CSS classes passed to the rendered output. */ className?: string; } /** * Select the best MIME type from available data based on priority. */ function selectMimeType( data: MediaData, priority: readonly string[], ): MimeType | null { const availableTypes = Object.keys(data); // Check priority list first for (const mimeType of priority) { if (availableTypes.includes(mimeType) && data[mimeType] != null) { return mimeType; } } // Fall back to first available type const firstAvailable = availableTypes.find((type) => data[type] != null); return firstAvailable || null; } /** * Default loading spinner */ function DefaultLoading() { return (

); } /** * MediaRouter component for rendering Jupyter outputs based on MIME type. * * Automatically selects the best available renderer for the output data, * following Jupyter's MIME type priority conventions. Supports custom * renderers and priority ordering for platform-specific MIME types. * * @example * ```tsx * // Basic usage * Hello, World!" * }} * /> * * // With custom renderers * , * }} * /> * ``` */ export function MediaRouter({ data, metadata = {}, priority: priorityProp, renderers: renderersProp, fallback, loading, className = "", }: MediaRouterProps) { const ctx = useMediaContext(); // Props override context, context overrides built-in defaults const priority = priorityProp ?? ctx?.priority ?? DEFAULT_PRIORITY; const renderers = renderersProp ?? ctx?.renderers ?? {}; const mimeType = selectMimeType(data, priority); if (!mimeType) { return (

{fallback ? ( fallback ) : (

No displayable output

)}

); } const content = data[mimeType]; const mimeMetadata = (metadata[mimeType] || {}) as Record; const loadingComponent = loading || ; // Check for custom renderer first if (renderers[mimeType]) { const customRenderer = renderers[mimeType]; return (

{customRenderer({ data: content, metadata: mimeMetadata, mimeType, className, })}

); } const renderBuiltIn = () => { // ISOLATION GUARD: These MIME types require iframe isolation for security. // If we're already in an iframe, we can render them safely. // If we're in the main DOM, block rendering and warn in development. const needsIsolation = mimeType === "text/markdown" || mimeType === "text/html" || mimeType === "image/svg+xml"; if (needsIsolation && !isInIframe()) { if (process.env.NODE_ENV === "development") { console.warn( `MediaRouter: "${mimeType}" requires iframe isolation. ` + `Use OutputArea with isolated="auto" or IsolatedFrame directly.`, ); } return null; } // Text/Markdown (only renders when in iframe) if (mimeType === "text/markdown") { return ; } // HTML (only renders when in iframe) if (mimeType === "text/html") { return ; } // SVG (only renders when in iframe) if (mimeType === "image/svg+xml") { return ; } // Images (not SVG) if (mimeType.startsWith("image/")) { const imageType = mimeType as | "image/png" | "image/jpeg" | "image/gif" | "image/webp"; return ( ); } // JSON and structured data (but not custom +json types without a renderer) if (mimeType === "application/json") { return ( ); } // Plain text (may contain ANSI) if (mimeType === "text/plain") { return {String(content)}; } // Widget view JSON - when rendered in-DOM without a widget renderer, // show a helpful message instead of raw JSON. This typically happens // when a widget is displayed inside an Output widget. if (mimeType === "application/vnd.jupyter.widget-view+json") { return (

Nested widget · Widgets inside Output widgets are not yet supported

); } // Unknown +json types without custom renderer - show as JSON if (mimeType.includes("+json")) { return ( ); } // Fallback: render as plain text return {String(content)}; }; return (

{renderBuiltIn()}

); } /** * Get the selected MIME type for debugging/display purposes. */ export function getSelectedMimeType( data: MediaData, priority: readonly string[] = DEFAULT_PRIORITY, ): string | null { return selectMimeType(data, priority); } 4a:["$","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":[]}],["$","$L4e",null,{"registryDependencies":["@nteract/media-provider","@nteract/ansi-output","@nteract/markdown-output","@nteract/html-output","@nteract/image-output","@nteract/svg-output","@nteract/json-output"]}]]}],["$","$L4f",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/media-router.json","proxyUrl":"https://shadcnregistry.com/r/nteract/media-router","itemId":"@nteract/media-router"}],["$","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"}],["$","$L50",null,{"files":[{"path":"registry/outputs/media-router.tsx","content":"$51","type":"registry:component","target":"components/outputs/media-router.tsx"}]}]]}],"$L52"]}]

Media Router

Installation

Files

components

Styles