HTML Output

Component for rendering HTML content in notebook outputs. Handles pandas DataFrames, rich HTML displays, and basic interactives.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/html-output.json

Copy the component to your project from the registry source.

Usage

import { HtmlOutput } from "@/registry/outputs/html-output"

export function Example() {
  const html = "<table><tr><th>Name</th><th>Value</th></tr><tr><td>A</td><td>1</td></tr></table>"
  
  return <HtmlOutput content={html} />
}

Props

Prop	Type	Default	Description
`content`	`string`	—	The HTML content to render
`unsafe`	`boolean`	`false`	Enable script execution (requires iframe sandbox)
`className`	`string`	`""`	Additional CSS classes

Security

HTML output from kernels can contain arbitrary scripts. By default, scripts are not executed.

Safe Mode (default)

By default, unsafe={false} renders HTML statically. Scripts in the HTML will not execute. This is suitable for most outputs like pandas DataFrames and simple HTML displays.

Set unsafe={true} to enable script execution for interactive outputs like Plotly, Bokeh, or custom widgets. This mode requires the component to be rendered inside an iframe for security — it will throw an error otherwise.

// Inside a sandboxed iframe only
<HtmlOutput content={interactiveHtml} unsafe={true} />

Common Use Cases

Output Type	unsafe
pandas DataFrame	`false`
Static HTML table	`false`
Plotly chart	`true`
Bokeh visualization	`true`
Custom widget	`true`