HTML Output
Component for rendering HTML content in notebook outputs
Low-level component for rendering HTML content in notebook outputs. Handles pandas DataFrames, rich HTML displays, and interactive visualizations.
This component must be rendered inside a sandboxed iframe. Use OutputArea (recommended) or IsolatedFrame for HTML outputs. The component will throw an error if rendered in the main DOM.
Installation
npx shadcn@latest add @nteract/html-outputNew to @nteract? pnpm dlx shadcn@latest registry add @nteract
Copy the component from the registry source.
Usage
For most use cases, use OutputArea which handles iframe isolation automatically:
import { OutputArea } from "@/components/cell/OutputArea"
// OutputArea automatically isolates HTML in an iframe
<OutputArea outputs={cell.outputs} />If you need direct access to HtmlOutput (e.g., in a custom iframe renderer):
// Inside a sandboxed iframe only
import { HtmlOutput } from "@/components/outputs/html-output"
<HtmlOutput content={htmlString} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | — | The HTML content to render |
className | string | "" | Additional CSS classes |
Security
This component requires iframe isolation because HTML content can contain:
- Scripts — Arbitrary JavaScript execution
- CSS attacks — Clickjacking, UI redressing
- Forms — Phishing vectors
- Embedded iframes — External content loading
The component uses createContextualFragment for full script execution support, which is safe inside a sandboxed iframe but dangerous in the main DOM.