Media Provider

Provides shared rendering configuration (custom renderers, priority, unsafe mode) to all nested MediaRouter instances via React context. Configure MIME type rendering once at the top of the tree instead of passing props to every MediaRouter.

Installation

npx shadcn@latest add @nteract/media-provider

New to @nteract? pnpm dlx shadcn@latest registry add @nteract

Copy from the registry source.

MediaProvider is included automatically when you install MediaRouter.

Usage

Basic

Set unsafe mode for all nested outputs:

import { MediaProvider } from "@/components/outputs/media-provider"
import { OutputArea } from "@/components/cell/OutputArea"

<MediaProvider unsafe={true}>
  <OutputArea outputs={cell.outputs} />
</MediaProvider>

Custom Renderers

import { MediaProvider } from "@/components/outputs/media-provider"
import { PlotlyChart } from "./plotly-chart"

<MediaProvider
  renderers={{
    "application/vnd.plotly.v1+json": ({ data }) => (
      <PlotlyChart data={data} />
    ),
  }}
>
  {/* All outputs can now render Plotly */}
  {cells.map(cell => (
    <OutputArea key={cell.id} outputs={cell.outputs} />
  ))}
</MediaProvider>

With Widgets

Bridge the widget system into the media pipeline so widget-type outputs render automatically:

import { MediaProvider } from "@/components/outputs/media-provider"
import { WidgetStoreProvider } from "@/components/widgets/widget-store-context"
import { WidgetView } from "@/components/widgets/widget-view"
import "@/components/widgets/controls"

<WidgetStoreProvider sendMessage={sendToKernel}>
  <MediaProvider
    renderers={{
      "application/vnd.jupyter.widget-view+json": ({ data }) => {
        const { model_id } = data as { model_id: string };
        return <WidgetView modelId={model_id} />;
      },
    }}
  >
    <OutputArea outputs={cell.outputs} />
  </MediaProvider>
</WidgetStoreProvider>

Nesting

Inner providers merge renderers with outer providers (inner wins for the same MIME type) and override priority/unsafe entirely:

<MediaProvider renderers={{ "text/html": CustomHtml }}>
  {/* Inner adds Plotly without losing the outer HTML renderer */}
  <MediaProvider renderers={{ "application/vnd.plotly.v1+json": Plotly }}>
    <OutputArea outputs={outputs} />
  </MediaProvider>
</MediaProvider>

Props

Prop	Type	Default	Description
`renderers`	`Record<string, CustomRenderer>`	`{}`	Custom MIME type renderers, merged with parent provider
`priority`	`readonly string[]`	`DEFAULT_PRIORITY`	MIME type priority order, overrides parent
`unsafe`	`boolean`	`false`	Allow unsafe HTML rendering, overrides parent
`children`	`ReactNode`	—	Child components

How It Works

MediaRouter resolves configuration with this fallback chain:

Direct props (highest priority) — props passed directly to <MediaRouter>
MediaProvider context — inherited from the nearest provider
Built-in defaults — DEFAULT_PRIORITY, empty renderers, unsafe=false

Without a MediaProvider in the tree, MediaRouter behaves exactly as before. No breaking changes.

Media Provider

On this page